delete pages that were never translated from en-US (de, part 1) (#1548)

32 files changed, 0 insertions, 7279 deletions

diff --git a/files/de/web/accessibility/understanding_wcag/perceivable/index.html b/files/de/web/accessibility/understanding_wcag/perceivable/index.html
deleted file mode 100644
index e8059d8fca..0000000000
--- a/files/de/web/accessibility/understanding_wcag/perceivable/index.html
+++ /dev/null
@@ -1,359 +0,0 @@
----
-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/animationevent/index.html b/files/de/web/api/animationevent/index.html
deleted file mode 100644
index 7bd808e0ca..0000000000
--- a/files/de/web/api/animationevent/index.html
+++ /dev/null
@@ -1,190 +0,0 @@
----
-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/index.html b/files/de/web/api/audiocontext/index.html
deleted file mode 100644
index cc2c2db92e..0000000000
--- a/files/de/web/api/audiocontext/index.html
+++ /dev/null
@@ -1,232 +0,0 @@
----
-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/canvasrenderingcontext2d/setlinedash/index.html b/files/de/web/api/canvasrenderingcontext2d/setlinedash/index.html
deleted file mode 100644
index 38aadbbfe3..0000000000
--- a/files/de/web/api/canvasrenderingcontext2d/setlinedash/index.html
+++ /dev/null
@@ -1,179 +0,0 @@
----
-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 class="hidden">
-<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/eventtarget/index.html b/files/de/web/api/eventtarget/index.html
deleted file mode 100644
index 3ed264119e..0000000000
--- a/files/de/web/api/eventtarget/index.html
+++ /dev/null
@@ -1,174 +0,0 @@
----
-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/file/getastext/index.html b/files/de/web/api/file/getastext/index.html
deleted file mode 100644
index fefda6647a..0000000000
--- a/files/de/web/api/file/getastext/index.html
+++ /dev/null
@@ -1,78 +0,0 @@
----
-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/rtcpeerconnection/index.html b/files/de/web/api/rtcpeerconnection/index.html
deleted file mode 100644
index df67ef624c..0000000000
--- a/files/de/web/api/rtcpeerconnection/index.html
+++ /dev/null
@@ -1,379 +0,0 @@
----
-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/webxr_device_api/index.html b/files/de/web/api/webxr_device_api/index.html
deleted file mode 100644
index 69e10d7d3b..0000000000
--- a/files/de/web/api/webxr_device_api/index.html
+++ /dev/null
@@ -1,298 +0,0 @@
----
-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/css/_doublecolon_placeholder/index.html b/files/de/web/css/_doublecolon_placeholder/index.html
deleted file mode 100644
index 7f10c944d4..0000000000
--- a/files/de/web/css/_doublecolon_placeholder/index.html
+++ /dev/null
@@ -1,150 +0,0 @@
----
-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>
-
-{{csssyntax}}
-
-<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/box-decoration-break/index.html b/files/de/web/css/box-decoration-break/index.html
deleted file mode 100644
index 1aaf5b37d0..0000000000
--- a/files/de/web/css/box-decoration-break/index.html
+++ /dev/null
@@ -1,136 +0,0 @@
----
-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>
-
-{{csssyntax}}
-
-<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/containing_block/index.html b/files/de/web/css/containing_block/index.html
deleted file mode 100644
index 94577e99cc..0000000000
--- a/files/de/web/css/containing_block/index.html
+++ /dev/null
@@ -1,258 +0,0 @@
----
-title: Layout und der enthaltende Block
-slug: Web/CSS/Containing_block
-translation_of: Web/CSS/Containing_block
----
-<div>{{cssref}}</div>
-
-<p>The size and position of an element are often impacted by its <strong>containing block</strong>. Most often, the containing block is the <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#content-area">content area</a> of an element's nearest <a href="/en-US/docs/Web/HTML/Block-level_elements">block-level</a> ancestor, but this is not always the case. <span class="seoSummary">In this article, we examine the factors that determine an element's containing block.</span></p>
-
-<p>When a user agent (such as your browser) lays out a document, it generates a box for every element. Each box is divided into four areas:</p>
-
-<ol start="1">
- <li>Content area</li>
- <li>Padding area</li>
- <li>Border area</li>
- <li>Margin area</li>
-</ol>
-
-<p><img alt="Diagram of the box model" src="https://mdn.mozillademos.org/files/16558/box-model.png" style="height: 300px; width: 544px;"></p>
-
-<p>Many developers believe that the containing block of an element is always the content area of its parent, but that isn't necessarily true. Let's investigate the factors that determine what an element's containing block is.</p>
-
-<h2 id="Effects_of_the_containing_block">Effects of the containing block</h2>
-
-<p>Before learning what determines the containing block of an element, it's useful to know why it matters in the first place.</p>
-
-<p>The size and position of an element are often impacted by its containing block. Percentage values that are applied to the {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("margin")}}, and offset properties of an absolutely positioned element (i.e., which has its {{cssxref("position")}} set to <code>absolute</code> or <code>fixed</code>) are computed from the element's containing block.</p>
-
-<h2 id="Identifying_the_containing_block">Identifying the containing block</h2>
-
-<p>The process for identifying the containing block depends entirely on the value of the element's {{cssxref("position")}} property:</p>
-
-<ol start="1">
- <li>If the <code>position</code> property is <code><strong>static</strong></code>, <code><strong>relative</strong></code>, or <strong><code>sticky</code></strong>, the containing block is formed by the edge of the <em>content box</em> of the nearest ancestor element that is either <strong>a block container</strong> (such as an inline-block, block, or list-item element) or <strong>establishes a formatting context</strong> (such as a table container, flex container, grid container, or the block container itself).</li>
- <li>If the <code>position</code> property is <code><strong>absolute</strong></code>, the containing block is formed by the edge of the <em>padding box</em> of the nearest ancestor element that has a <code>position</code> value other than <code>static</code> (<code>fixed</code>, <code>absolute</code>, <code>relative</code>, or <code>sticky</code>).</li>
- <li>If the <code>position</code> property is <code><strong>fixed</strong></code>, the containing block is established by the {{glossary("viewport")}} (in the case of continuous media) or the page area (in the case of paged media).</li>
- <li>If the <code>position</code> property is <code><strong>absolute</strong></code> or <code><strong>fixed</strong></code>, the containing block may also be formed by the edge of the <em>padding box</em> of the nearest ancestor element that has the following:
-  <ol start="1">
-   <li>A {{cssxref("transform")}} or {{cssxref("perspective")}} value other than <code>none</code></li>
-   <li>A {{cssxref("will-change")}} value of <code>transform</code> or <code>perspective</code></li>
-   <li>A {{cssxref("filter")}} value other than <code>none</code> or a <code>will-change</code> value of <code>filter</code> (only works on Firefox).</li>
-   <li>A {{cssxref("contain")}} value of <code>paint</code> (e.g. <code>contain: paint;</code>)</li>
-  </ol>
- </li>
-</ol>
-
-<div class="note">
-<p><strong>Note:</strong> The containing block in which the root element ({{HTMLElement("html")}}) resides is a rectangle called the <strong>initial containing block</strong>. It has the dimensions of the viewport (for continuous media) or the page area (for paged media).</p>
-</div>
-
-<h2 id="Calculating_percentage_values_from_the_containing_block">Calculating percentage values from the containing block</h2>
-
-<p>As noted above, when certain properties are given a percentage value, the computed value depends on the element's containing block. The properties that work this way are <strong>box model properties</strong> and <strong>offset properties</strong>:</p>
-
-<ol start="1">
- <li>The {{cssxref("height")}}, {{cssxref("top")}}, and {{cssxref("bottom")}} properties compute percentage values from the <code>height</code> of the containing block.</li>
- <li>The {{cssxref("width")}}, {{cssxref("left")}}, {{cssxref("right")}}, {{cssxref("padding")}}, and {{cssxref("margin")}} properties compute percentage values from the <code>width</code> of the containing block.</li>
-</ol>
-
-<h2 id="Some_examples">Some examples</h2>
-
-<p>The HTML code for all our examples is:</p>
-
-<pre class="brush: html notranslate">&lt;body&gt;
-  &lt;section&gt;
-    &lt;p&gt;This is a paragraph!&lt;/p&gt;
-  &lt;/section&gt;
-&lt;/body&gt;
-</pre>
-
-<p>Only the CSS is altered in each instance below.</p>
-
-<h3 id="Example_1">Example 1</h3>
-
-<p>In this example, the paragraph is statically positioned, so its containing block is {{HTMLElement("section")}} because it's the nearest ancestor that is a block container.</p>
-
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;body&gt;
-  &lt;section&gt;
-    &lt;p&gt;This is a paragraph!&lt;/p&gt;
-  &lt;/section&gt;
-&lt;/body&gt;
-</pre>
-</div>
-
-<pre class="brush: css notranslate">body {
-  background: beige;
-}
-
-section {
-  display: block;
-  width: 400px;
-  height: 160px;
-  background: lightgray;
-}
-
-p {
-  width: 50%;   /* == 400px * .5 = 200px */
-  height: 25%;  /* == 160px * .25 = 40px */
-  margin: 5%;   /* == 400px * .05 = 20px */
-  padding: 5%;  /* == 400px * .05 = 20px */
-  background: cyan;
-}
-</pre>
-
-<p>{{EmbedLiveSample('Example_1','100%','300')}}</p>
-
-<h3 id="Example_2">Example 2</h3>
-
-<p>In this example, the paragraph's containing block is the {{HTMLElement("body")}} element, because <code>&lt;section&gt;</code> is not a block container (because of <code>display: inline</code>) and doesn’t establish a formatting context.</p>
-
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;body&gt;
-  &lt;section&gt;
-    &lt;p&gt;This is a paragraph!&lt;/p&gt;
-  &lt;/section&gt;
-&lt;/body&gt;
-</pre>
-</div>
-
-<pre class="brush: css notranslate">body {
-  background: beige;
-}
-
-section {
-  display: inline;
-  background: lightgray;
-}
-
-p {
-  width: 50%;     /* == half the body's width */
-  height: 200px;  /* Note: a percentage would be 0 */
-  background: cyan;
-}
-</pre>
-
-<p>{{EmbedLiveSample('Example_2','100%','300')}}</p>
-
-<h3 id="Example_3">Example 3</h3>
-
-<p>In this example, the paragraph's containing block is <code>&lt;section&gt;</code> because the latter's <code>position</code> is <code>absolute</code>. The paragraph's percentage values are affected by the <code>padding</code> of its containing block, though if the containing block's {{cssxref("box-sizing")}} value were <code>border-box</code> this would not be the case.</p>
-
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;body&gt;
-  &lt;section&gt;
-    &lt;p&gt;This is a paragraph!&lt;/p&gt;
-  &lt;/section&gt;
-&lt;/body&gt;
-</pre>
-</div>
-
-<pre class="brush: css notranslate">body {
-  background: beige;
-}
-
-section {
-  position: absolute;
-  left: 30px;
-  top: 30px;
-  width: 400px;
-  height: 160px;
-  padding: 30px 20px;
-  background: lightgray;
-}
-
-p {
-  position: absolute;
-  width: 50%;   /* == (400px + 20px + 20px) * .5 = 220px */
-  height: 25%;  /* == (160px + 30px + 30px) * .25 = 55px */
-  margin: 5%;   /* == (400px + 20px + 20px) * .05 = 22px */
-  padding: 5%;  /* == (400px + 20px + 20px) * .05 = 22px */
-  background: cyan;
-}
-</pre>
-
-<p>{{EmbedLiveSample('Example_3','100%','300')}}</p>
-
-<h3 id="Example_4">Example 4</h3>
-
-<p>In this example, the paragraph's <code>position</code> is <code>fixed</code>, so its containing block is the initial containing block (on screens, the viewport). Thus, the paragraph's dimensions change based on the size of the browser window.</p>
-
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;body&gt;
-  &lt;section&gt;
-    &lt;p&gt;This is a paragraph!&lt;/p&gt;
-  &lt;/section&gt;
-&lt;/body&gt;
-</pre>
-</div>
-
-<pre class="brush: css notranslate">body {
-  background: beige;
-}
-
-section {
-  width: 400px;
-  height: 480px;
-  margin: 30px;
-  padding: 15px;
-  background: lightgray;
-}
-
-p {
-  position: fixed;
-  width: 50%;   /* == (50vw - (width of vertical scrollbar)) */
-  height: 50%;  /* == (50vh - (height of horizontal scrollbar)) */
-  margin: 5%;   /* == (5vw - (width of vertical scrollbar)) */
-  padding: 5%;  /* == (5vw - (width of vertical scrollbar)) */
-  background: cyan;
-}
-</pre>
-
-<p>{{EmbedLiveSample('Example_4','100%','300')}}</p>
-
-<h3 id="Example_5">Example 5</h3>
-
-<p>In this example, the paragraph's <code>position</code> is <code>absolute</code>, so its containing block is <code>&lt;section&gt;</code>, which is the nearest ancestor with a {{cssxref("transform")}} property that isn't <code>none</code>.</p>
-
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;body&gt;
-  &lt;section&gt;
-    &lt;p&gt;This is a paragraph!&lt;/p&gt;
-  &lt;/section&gt;
-&lt;/body&gt;
-</pre>
-</div>
-
-<pre class="brush: css notranslate">body {
-  background: beige;
-}
-
-section {
-  transform: rotate(0deg);
-  width: 400px;
-  height: 160px;
-  background: lightgray;
-}
-
-p {
-  position: absolute;
-  left: 80px;
-  top: 30px;
-  width: 50%;   /* == 200px */
-  height: 25%;  /* == 40px */
-  margin: 5%;   /* == 20px */
-  padding: 5%;  /* == 20px */
-  background: cyan;
-}
-</pre>
-
-<p>{{EmbedLiveSample('Example_5','100%','300')}}</p>
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li>{{css_key_concepts}}</li>
- <li>The {{cssxref("all")}} property resets all CSS declarations to a given known state</li>
-</ul>
diff --git a/files/de/web/css/css_values_and_units/index.html b/files/de/web/css/css_values_and_units/index.html
deleted file mode 100644
index 7cde234d24..0000000000
--- a/files/de/web/css/css_values_and_units/index.html
+++ /dev/null
@@ -1,493 +0,0 @@
----
-title: CSS values and units
-slug: Web/CSS/CSS_Values_and_Units
-translation_of: Web/CSS/CSS_Values_and_Units
----
-<div>{{CSSRef}}</div>
-
-<p class="summary"><span class="seoSummary">Jede CSS declaration includes a property / value pair. Depending on the property, the value can include a single integer or keyword, to a series of keywords and values with or without units. There are a common set of data types -- values and units -- that CSS properties accept.</span> Below is an overview of most of these data types. Refer to the page for each value type for more detailed information.</p>
-
-<h2 id="Textual_data_types">Textual data types</h2>
-
-<ul>
- <li>{{cssxref("&lt;custom-ident&gt;")}}</li>
- <li>Pre-defined keywords as an <code>&lt;ident&gt;</code></li>
- <li>{{cssxref("&lt;string&gt;")}}</li>
- <li>{{cssxref("&lt;url&gt;")}}</li>
-</ul>
-
-<p>Text data types are either <code>&lt;string&gt;</code>, a quoted series of characters, or an <code>&lt;ident&gt;</code>, a "CSS Identifier" which is an unquoted string. A <code>&lt;string&gt;</code> must be quoted with either single or double quotes. CSS Identifiers, listed in the specifications as <code>&lt;ident&gt;</code> or <code>&lt;custom-ident&gt;</code>, must be unquoted.</p>
-
-<p>In the CSS specifications, values that can be defined by the web developer, like keyframe animations, font-family names, or grid areas are listed as a  {{cssxref("&lt;custom-ident&gt;")}}, {{cssxref("&lt;string&gt;")}}, or both.</p>
-
-<p>When both quoted and unquoted user defined text values are permitted, the specification will list <code>&lt;custom-ident&gt; | &lt;string&gt;</code>, meaning quotes are optional, such as is the case with animation names:</p>
-
-<pre class="brush: css notranslate">@keyframe validIdent {
-  /* keyframes go here */
-}
-@keyframe 'validString' {
-  /* keyframes go here */
-}</pre>
-
-<p>Some text values are not valid if encompassed in quotes. For example, the value of {{cssxref("grid-area")}} can be a <code>&lt;custom-ident&gt;</code>, so if we had a grid area named <code>content</code> we would use it without quotes:</p>
-
-<pre class="brush: css notranslate">.item {
-  grid-area: content;
-}
-</pre>
-
-<p>In comparison, a data type that is a {{cssxref("&lt;string&gt;")}}, such as a string value of the {{cssxref("content")}} property, must be quoted:</p>
-
-<pre class="brush: css notranslate">.item::after {
-    content: "This is my content.";
-}
-</pre>
-
-<p>While you can generally create any name you want, including using emojis, the identifier can't be <code>none</code>, <code>unset</code>, <code>initial</code>, or <code>inherit</code>, start with a digit or two dashes, and generally you don't want it to be any other pre-defined CSS keyword. See the {{cssxref("&lt;custom-ident&gt;")}} and {{cssxref("&lt;string&gt;")}} reference pages for more details.</p>
-
-<h3 id="Pre-defined_keyword_values">Pre-defined keyword values</h3>
-
-<p>Pre-defined keywords are text values defined by the specification for that property. These keywords are also CSS Identifiers and are therefore used without quotes.</p>
-
-<p>When viewing CSS property value syntax in a CSS specification or the MDN property page, allowable keywords will be listed in the following form. The following values are the pre-defined keyword values allowed for {{cssxref("float")}}.</p>
-
-<pre class="syntaxbox notranslate">left <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar: exactly one of the entities must be present">|</a> right <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar: exactly one of the entities must be present">|</a> none <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar: exactly one of the entities must be present">|</a> inline-start <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar: exactly one of the entities must be present">|</a> inline-end</pre>
-
-<p>Such values are used without quotes:</p>
-
-<pre class="brush: css notranslate"><code>.box {
-    float: left;
-}
-</code></pre>
-
-<h3 id="CSS-wide_values">CSS-wide values</h3>
-
-<p>In addition to the pre-defined keywords that are part of the specification for a property, all CSS properties accept the CSS-wide property values {{cssxref("initial")}}, {{cssxref("inherit")}}, and {{cssxref("unset")}}, which explicitly specify defaulting behaviors.</p>
-
-<p>The <code>initial</code> keyword represents the value specified as the property’s initial value. The <code>inherit</code> keyword represents the computed value of the property on the element’s parent, provided it is inherited.</p>
-
-<p>The <code>unset</code> keyword acts as either <code>inherit</code> or <code>initial</code>, depending on whether the property is inherited or not.</p>
-
-<p>A fourth value of {{cssxref("revert")}} was added in the Cascade Level 4 specification, but it does not currently have good browser support.</p>
-
-<h3 id="URLs">URLs</h3>
-
-<p>A {{cssxref("&lt;url&gt;")}} type uses functional notation, which accepts a <code>&lt;string&gt;</code> that is a URL. This may be an absolute URL or a relative URL. For example, if you wanted to include a background image, you might use either of the following.</p>
-
-<pre class="brush: css notranslate"><code>.box {
-  background-image: url("images/my-background.png");
-}</code>
-
-<code>.box {
-  background-image: url("https://www.exammple.com/images/my-background.png");
-}</code>
-</pre>
-
-<p>The parameter for <code>url()</code> can be either quoted or unquoted. If unquoted, it is parsed as a <code>&lt;url-token&gt;</code>, which has extra requirements including the escaping of certain characters. See {{cssxref("&lt;url&gt;")}}  for more information.</p>
-
-<h2 id="Numeric_data_types">Numeric data types</h2>
-
-<ul>
- <li>{{cssxref("&lt;integer&gt;")}}</li>
- <li>{{cssxref("&lt;number&gt;")}}</li>
- <li>{{cssxref("&lt;dimension&gt;")}}</li>
- <li>{{cssxref("&lt;percentage&gt;")}}</li>
-</ul>
-
-<h3 id="Integers">Integers</h3>
-
-<p>An integer is one or more decimal digits, <code>0</code> through <code>9</code>, such as <code>1024</code> or <code>-55</code>. An integer may be preceded by a <code>+</code> or <code>-</code> symbol, with no space between the symbol and the integer.</p>
-
-<h3 id="Numbers">Numbers</h3>
-
-<p>A {{cssxref("&lt;number&gt;")}} represents a real number, which 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>. Numbers may also be preceded by a <code>+</code> or <code>-</code> symbol.</p>
-
-<h3 id="Dimensions">Dimensions</h3>
-
-<p>A {{cssxref("&lt;dimension&gt;")}} is a <code>&lt;number&gt;</code> with a unit attached to it, for example <code>45deg</code>, <code>100ms</code>, or <code>10px</code>. The attached unit identifier is case insensitive. There is never a space or any other characters between a the number and the unit identifier: i.e. <code>1 cm</code> is not valid.</p>
-
-<p>CSS uses dimensions to specify:</p>
-
-<ul>
- <li>{{cssxref("&lt;length&gt;")}} (Distance units)</li>
- <li>{{cssxref("&lt;angle&gt;")}}</li>
- <li>{{cssxref("&lt;time&gt;")}}</li>
- <li>{{cssxref("&lt;frequency&gt;")}}</li>
- <li>{{cssxref("&lt;resolution&gt;")}}</li>
-</ul>
-
-<p>These are all covered in subsections below.</p>
-
-<h4 id="Distance_units">Distance units</h4>
-
-<p>Where a distance unit, also known as a length, is allowed as a value for a property, this is described as the {{cssxref("&lt;length&gt;")}} type. There are two types of lengths in CSS: relative and absolute.</p>
-
-<p>Relative length units specify a length in relation to something else. For example, <code>em</code> is relative to the font size on the element and <code>vh</code> is relative to the viewport height.</p>
-
-<table class="standard-table">
- <caption>
- <h4 id="Relative_length_units">Relative length units</h4>
- </caption>
- <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>cap</code></td>
-   <td>Cap height (the nominal height of capital letters) of the element's font.</td>
-  </tr>
-  <tr>
-   <td><code>ch</code></td>
-   <td>Average character advance of a narrow glyph in the element’s font, as represented by the “0” (ZERO, U+0030) glyph.</td>
-  </tr>
-  <tr>
-   <td><code>ic</code></td>
-   <td>Average character advance of a full width glyph in the element’s font, as represented by the “水” (CJK water ideograph, U+6C34) glyph.</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>rlh</code></td>
-   <td>Line height of the root element.</td>
-  </tr>
-  <tr>
-   <td><code>vw</code></td>
-   <td>1% of viewport's width.</td>
-  </tr>
-  <tr>
-   <td><code>vh</code></td>
-   <td>1% of viewport's height.</td>
-  </tr>
-  <tr>
-   <td><code>vi</code></td>
-   <td>1% of viewport's size in the root element's inline axis.</td>
-  </tr>
-  <tr>
-   <td><code>vb</code></td>
-   <td>1% of viewport's size in the root element's block axis.</td>
-  </tr>
-  <tr>
-   <td><code>vmin</code></td>
-   <td>1% of viewport's smaller dimension.</td>
-  </tr>
-  <tr>
-   <td><code>vmax</code></td>
-   <td>1% of viewport's larger dimension.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>Absolute length units are fixed to a physical length: either an inch or a centimeter. Many of these units are therefore more useful when the output is a fixed size media, such as print. For example, <code>mm</code> is a physical millimeter, 1/10th of a centimeter.</p>
-
-<table class="standard-table">
- <caption>
- <h4 id="Absolute_length_units">Absolute length units</h4>
- </caption>
- <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/16th 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>When including a length value, if the length is <code>0</code>, the unit identifier is not required. Otherwise, the unit identifier is required, is case insensitive, and must come immediately after the numeric part of the value, with no space in-between.</p>
-
-<h4 id="Angle_units">Angle units</h4>
-
-<p>Angle values are represented by the type {{cssxref("&lt;angle&gt;")}} and accept the following values:</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Unit</th>
-   <th scope="col">Name</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>deg</code></td>
-   <td>Degrees</td>
-   <td>There are 360 degrees in a full circle.</td>
-  </tr>
-  <tr>
-   <td><code>grad</code></td>
-   <td>Gradians</td>
-   <td>There are 400 gradians in a full circle.</td>
-  </tr>
-  <tr>
-   <td><code>rad</code></td>
-   <td>Radians</td>
-   <td>There are 2π radians in a full circle.</td>
-  </tr>
-  <tr>
-   <td><code>turn</code></td>
-   <td>Turns</td>
-   <td>There is 1 turn in a full circle.</td>
-  </tr>
- </tbody>
-</table>
-
-<h4 id="Time_units">Time units</h4>
-
-<p>Time values are represented by the type {{cssxref("&lt;time&gt;")}}. When including a time value, the unit identifier -- the <code>s</code> or <code>ms</code> -- is required. It accepts the following values.</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Unit</th>
-   <th scope="col">Name</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>s</code></td>
-   <td>Seconds</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>ms</code></td>
-   <td>Milliseconds</td>
-   <td>There are 1,000 milliseconds in a second.</td>
-  </tr>
- </tbody>
-</table>
-
-<h4 id="Frequency_units">Frequency units</h4>
-
-<p>Frequency values are represented by the type {{cssxref("&lt;frequency&gt;")}}. It accepts the following values.</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Unit</th>
-   <th scope="col">Name</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>Hz</code></td>
-   <td>Hertz</td>
-   <td>Represents the number of occurrences per second.</td>
-  </tr>
-  <tr>
-   <td><code>kHz</code></td>
-   <td>KiloHertz</td>
-   <td>A kiloHertz is 1000 Hertz.</td>
-  </tr>
- </tbody>
-</table>
-
-<p><code>1Hz</code>, which can also be written as <code>1hz</code> or <code>1HZ</code>, is one cycle per second.</p>
-
-<h4 id="Resolution_unit">Resolution unit</h4>
-
-<p>Resolution units are represented by the type {{cssxref("&lt;resolution&gt;")}}. They represent the size of a single dot in a graphical representation, such as a screen, by indicating how many of these dots fit in a CSS inch, centimeter, or pixel. It accepts the following values:</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Unit</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>dpi</code></td>
-   <td>Dots per inch.</td>
-  </tr>
-  <tr>
-   <td><code>dpcm</code></td>
-   <td>Dots per centimetre.</td>
-  </tr>
-  <tr>
-   <td><code>dppx</code>, <code>x</code></td>
-   <td>Dots per px unit.</td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="Percentages">Percentages</h3>
-
-<p>A {{cssxref("&lt;percentage&gt;")}} is a type that represents a fraction of some other value.</p>
-
-<p>Percentage values are always relative to another quantity, for example a length. Each property that allows percentages also defines the quantity to which the percentage refers. This quantity can be a value of another property of the same element, the value of a property of an ancestor element, a measurement of a containing block, or something else.</p>
-
-<p>As an example, if you specify the {{cssxref("width")}} of a box as a percentage, it refers to the percentage of the box's parent's computed width:</p>
-
-<pre class="brush: css notranslate">.box {
-  width: 50%;
-}</pre>
-
-<h3 id="Mixing_percentages_and_dimensions">Mixing percentages and dimensions</h3>
-
-<p>Some properties accept a dimension that could be either one of two types, for example a <code>&lt;length&gt;</code> <strong>or</strong> a <code>&lt;percentage&gt;</code>. In this case the allowed value is detailed in the specification as a combination unit, e.g. {{cssxref("&lt;length-percentage&gt;")}}. Other possible combinations are as follows:</p>
-
-<ul>
- <li>{{cssxref("&lt;frequency-percentage&gt;")}}</li>
- <li>{{cssxref("&lt;angle-percentage&gt;")}}</li>
- <li>{{cssxref("&lt;time-percentage&gt;")}}</li>
-</ul>
-
-<h3 id="Special_data_types_defined_in_other_specs">Special data types (defined in other specs)</h3>
-
-<ul>
- <li>{{cssxref("&lt;color&gt;")}}</li>
- <li>{{cssxref("&lt;image&gt;")}}</li>
- <li>{{cssxref("&lt;position&gt;")}}</li>
-</ul>
-
-<h4 id="Color">Color</h4>
-
-<p>The {{cssxref("&lt;color&gt;")}} value specifies the color of an element feature (e.g. it's background color), and is defined in the <a href="https://drafts.csswg.org/css-color-3/">CSS Color Module</a>.</p>
-
-<h4 id="Image">Image</h4>
-
-<p>The {{cssxref("&lt;image&gt;")}} value specifies all the different types of image that can be used in CSS, and is defined in the <a href="https://www.w3.org/TR/css-images-4/">CSS Image Values and Replaced Content Module</a>.</p>
-
-<h4 id="Position">Position</h4>
-
-<p>The {{cssxref("&lt;position&gt;")}} type defines 2D positioning of an object inside a positioning area, for example a background image inside a container. This type is interpreted as a  {{cssxref("background-position")}} and therefore specified in the <a href="https://www.w3.org/TR/css-backgrounds-3/">CSS Backgrounds and Borders specification</a>.</p>
-
-<h3 id="Functional_notation">Functional notation</h3>
-
-<ul>
- <li>{{cssxref("calc()")}}</li>
- <li>{{cssxref("min", "min()")}}</li>
- <li>{{cssxref("max", "max()")}}</li>
- <li>{{cssxref("clamp", "clamp()")}}</li>
- <li>{{cssxref("toggle", "toggle()")}}</li>
- <li>{{cssxref("attr", "attr()")}}</li>
-</ul>
-
-<p><a href="/en-US/docs/Web/CSS/CSS_Functionals">Functional notation</a> is a type of value that can represent more complex types or invoke special processing by CSS. The syntax starts with the name of the function immediately followed by a left parenthesis <code>(</code> followed by the argument(s) to the notation followed by a right parenthesis <code>)</code>. Functions can take multiple arguments, which are formatted similarly to a CSS property value.</p>
-
-<p>White space is allowed, but optional inside the parentheses. (But see notes regarding whitespace within pages for <code>min()</code>, <code>max()</code> and <code>clamp()</code> functions.)</p>
-
-<p>Some legacy functional notations such as <code>rgba()</code> use commas, but generally commas are only used to separate items in a list. If a comma is used to separate arguments, white space is optional before and after the comma.</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("CSS4 Values")}}</td>
-   <td>{{Spec2("CSS4 Values")}}</td>
-   <td>Adds the <code>vi</code>, <code>vb</code>, <code>ic</code>, <code>cap</code>, <code>lh</code> and <code>rlh</code> units.<br>
-    Adds the <code>min()</code>, <code>max()</code> and <code>clamp()</code> functional notation<br>
-    Adds <code>toggle()</code></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS3 Values")}}</td>
-   <td>{{Spec2("CSS3 Values")}}</td>
-   <td>Adds <code>calc()</code>, <code>ch</code>, <code>rem</code>, <code>vw</code>, <code>vw</code>, <code>vmin</code>,<code> vmax</code>, <code>Q</code></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS4 Colors")}}</td>
-   <td>{{Spec2("CSS4 Colors")}}</td>
-   <td>Adds commaless syntaxes for the <code>rgb()</code>, <code>rgba()</code>, <code>hsl()</code>, and <code>hsla()</code> functions. Allows alpha values in <code>rgb()</code> and <code>hsl()</code>, turning <code>rgba()</code> and <code>hsla()</code> into (deprecated) aliases for them.<br>
-    Adds color keyword <code>rebeccapurple</code>.<br>
-    Adds 4- and 8-digit hex color values, where the last digit(s) represents the alpha value.<br>
-    Adds <code>hwb()</code>, <code>device-cmyk()</code>, and <code>color()</code> functions.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS3 Colors")}}</td>
-   <td>{{Spec2("CSS3 Colors")}}</td>
-   <td>Deprecates system-colors. Adds SVG colors. Adds the <code>rgba()</code>, <code>hsl()</code>, and <code>hsla()</code> functions.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS4 Images")}}</td>
-   <td>{{Spec2("CSS4 Images")}}</td>
-   <td>
-    <p>Adds <code>element()</code>, <code>image()</code>, <code>image-set()</code>, <code>conic-gradient()</code></p>
-   </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS3 Images")}}</td>
-   <td>{{Spec2("CSS3 Images")}}</td>
-   <td>Initial definition of image.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS2.1")}}</td>
-   <td>{{Spec2("CSS2.1")}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS1")}}</td>
-   <td>{{Spec2("CSS1")}}</td>
-   <td>Initial definition.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/CSS/CSS_Types">CSS Basic Data Types</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">Introduction to CSS: Values and Units </a></li>
-</ul>
diff --git a/files/de/web/css/media_queries/testing_media_queries/index.html b/files/de/web/css/media_queries/testing_media_queries/index.html
deleted file mode 100644
index c30abd2ccd..0000000000
--- a/files/de/web/css/media_queries/testing_media_queries/index.html
+++ /dev/null
@@ -1,88 +0,0 @@
----
-title: Media Queries programmatisch testen
-slug: Web/CSS/Media_Queries/Testing_media_queries
-translation_of: Web/CSS/Media_Queries/Testing_media_queries
----
-<div>{{cssref}}</div>
-
-<p>The {{Glossary("DOM")}} provides features that can test the results of a <a href="/en-US/docs/Web/CSS/Media_Queries">media query</a> programmatically, via the {{domxref("MediaQueryList")}} interface and its methods and properties. Once you've created a <code>MediaQueryList</code> object, you can check the result of the query or receive notifications when the result changes.</p>
-
-<h2 id="Creating_a_media_query_list">Creating a media query list</h2>
-
-<p>Before you can evaluate the results of a media query, you need to create the <code>MediaQueryList</code> object representing the query. To do this, use the {{domxref("window.matchMedia")}} method.</p>
-
-<p>For example, to set up a query list that determines if the device is in landscape or portrait orientation:</p>
-
-<pre class="brush: js notranslate">const mediaQueryList = window.matchMedia("(orientation: portrait)");
-</pre>
-
-<h2 id="Checking_the_result_of_a_query">Checking the result of a query</h2>
-
-<p>Once you've created your media query list, you can check the result of the query by looking at the value of its <code>matches</code> property:</p>
-
-<pre class="brush: js notranslate">if (mediaQueryList.matches) {
-  /* The viewport is currently in portrait orientation */
-} else {
-  /* The viewport is not currently in portrait orientation, therefore landscape */
-}
-</pre>
-
-<h2 id="Receiving_query_notifications">Receiving query notifications</h2>
-
-<p>If you need to be aware of changes to the evaluated result of the query on an ongoing basis, it's more efficient to register a <a href="/en-US/docs/Web/API/EventTarget/addEventListener">listener</a> than to poll the query's result. To do this, call the <code>addListener()</code> method on the {{domxref("MediaQueryList")}} object, with a callback function to invoke when the media query status changes (e.g., the media query test goes from <code>true</code> to <code>false</code>):</p>
-
-<pre class="brush: js notranslate">// Create the query list.
-const mediaQueryList = window.matchMedia("(orientation: portrait)");
-
-// Define a callback function for the event listener.
-function handleOrientationChange(mql) {
-  // ...
-}
-
-// Run the orientation change handler once.
-handleOrientationChange(mediaQueryList);
-
-// Add the callback function as a listener to the query list.
-mediaQueryList.addListener(handleOrientationChange);
-</pre>
-
-<p>This code creates the orientation-testing media query list, then adds an event listener to it. After adding the listener, we also call the listener directly. This makes our listener perform adjustments based on the current device orientation; otherwise, our code might assume the device is in portrait mode at startup, even if it's actually in landscape mode.</p>
-
-<p>The <code>handleOrientationChange()</code> function would look at the result of the query and handle whatever we need to do on an orientation change:</p>
-
-<pre class="brush: js notranslate">function handleOrientationChange(evt) {
-  if (evt.matches) {
-    /* The viewport is currently in portrait orientation */
-  } else {
-    /* The viewport is currently in landscape orientation */
-  }
-}
-</pre>
-
-<p>Above, we define the parameter as <code>evt</code> — an event object. This makes sense because <a href="/en-US/docs/Web/API/MediaQueryList#Browser_compatibility">newer implementations of <code>MediaQueryList</code></a> handle event listeners in a standard way. They no longer use the unusual {{domxref("MediaQueryListListener")}} mechanism, but a standard event listener setup, passing an <a href="/en-US/docs/Web/API/Event">event object</a> of type {{domxref("MediaQueryListEvent")}} as the argument to the callback function.</p>
-
-<p>This event object also includes the {{domxref("MediaQueryListEvent.media","media")}} and {{domxref("MediaQueryListEvent.matches","matches")}} properties, so you can query these features of the <code>MediaQueryList</code> by directly accessing it, or accessing the event object.</p>
-
-<h2 id="Ending_query_notifications">Ending query notifications</h2>
-
-<p>To stop receiving notifications about changes to the value of your media query, call <code>removeListener()</code> on the <code>MediaQueryList</code>, passing it the name of the previously-defined callback function:</p>
-
-<pre class="brush: js notranslate">mediaQueryList.removeListener(handleOrientationChange);
-</pre>
-
-<h2 id="Browser_compatibility">Browser compatibility</h2>
-
-<h3 id="MediaQueryList_interface"><code>MediaQueryList</code> interface</h3>
-
-
-
-<p>{{Compat("api.MediaQueryList")}}</p>
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li><a href="/en-US/docs/CSS/Media_queries">Media queries</a></li>
- <li>{{domxref("window.matchMedia()")}}</li>
- <li>{{domxref("MediaQueryList")}}</li>
- <li>{{domxref("MediaQueryListEvent")}}</li>
-</ul>
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
deleted file mode 100644
index 77efb6a299..0000000000
--- a/files/de/web/css/media_queries/using_media_queries/index.html
+++ /dev/null
@@ -1,644 +0,0 @@
----
-title: Media Queries verwenden
-slug: Web/CSS/Media_Queries/Using_media_queries
-tags:
-  - NeedsTranslation
-translation_of: Web/CSS/Media_Queries/Using_media_queries
----
-<div>{{cssref}}</div>
-
-<p>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.</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 notranslate">&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 notranslate">@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 notranslate">@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 notranslate">@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 notranslate">@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 notranslate" 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 notranslate" style="font-size: 14px;">@media not (all and (monochrome)) { ... }
-</pre>
-
-<p>... rather than like this:</p>
-
-<pre class="brush: css notranslate" 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 notranslate" style="font-size: 14px;">@media not screen and (color), print and (color)
-</pre>
-
-<p>It is evaluated like this:</p>
-
-<pre class="brush: css notranslate" 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 notranslate">&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 class="notranslate">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 notranslate">@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 notranslate">@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 notranslate">@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 notranslate">&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 notranslate">@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 notranslate">@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 notranslate">&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 notranslate" 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 notranslate">@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 notranslate">@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 notranslate">@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 notranslate">@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 notranslate">@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 notranslate">@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 notranslate">@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 notranslate">@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 notranslate">&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 notranslate">@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 class="notranslate">@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>
-
-<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/media_queries/using_media_queries_for_accessibility/index.html b/files/de/web/css/media_queries/using_media_queries_for_accessibility/index.html
deleted file mode 100644
index 004ff3a78e..0000000000
--- a/files/de/web/css/media_queries/using_media_queries_for_accessibility/index.html
+++ /dev/null
@@ -1,88 +0,0 @@
----
-title: Verwendung von Media Queries für Barrierefreiheit
-slug: Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility
-translation_of: Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility
----
-<p><strong>Media Queries</strong> can also be used to help users with disabilities understand your website better.</p>
-
-<h2 id="Reduced_Motion">Reduced Motion</h2>
-
-<p>Blinking and flashing animation can be problematic for people with cognitive concerns such as Attention Deficit Hyperactivity Disorder (ADHD). Additionally, certain kinds of motion can be a trigger for Vestibular disorders, epilepsy, and migraine and Scotopic sensitivity.</p>
-
-<p>Also, this method of switching animation off according to the user's preference can also benefit users with low battery or low-end phones or computers.</p>
-
-<h3 id="Syntax">Syntax</h3>
-
-<dl>
- <dt><code><dfn>no-preference</dfn></code></dt>
- <dd>Indicates that the user has made no preference known to the system.</dd>
- <dt><code><dfn>reduce</dfn></code></dt>
- <dd>Indicates that user has notified the system that they prefer an interface that minimizes the amount of movement or animation, preferably to the point where all non-essential movement is removed.</dd>
-</dl>
-
-<h3 id="Example">Example</h3>
-
-<p>This example has an annoying animation unless you turn on Reduce Motion in your accessibility preferences.</p>
-
-<h4 id="HTML">HTML</h4>
-
-<pre class="brush: html notranslate">&lt;div class="animation"&gt;animated box&lt;/div&gt;
-</pre>
-
-<h4 id="CSS">CSS</h4>
-
-<pre class="brush: css notranslate">.animation {
-  -webkit-animation: vibrate 0.3s linear infinite both;
-  animation: vibrate 0.3s linear infinite both;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .animation {
-    animation: none;
-  }
-}
-</pre>
-
-<h2 id="High_Contrast_Mode">High Contrast Mode</h2>
-
-<div>{{CSSRef}}{{Non-standard_header}}</div>
-
-<p>The <strong>-ms-high-contrast</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> is a <a href="/en-US/docs/Web/CSS/Microsoft_extensions">Microsoft extension</a> that describes whether the application is being displayed in high contrast mode, and with what color variation.</p>
-
-<p>This will help not only users with low vision and contrast sensitivity issues but also users that are working on a computer or phone with direct sunlight.</p>
-
-<h3 id="Syntax_2">Syntax</h3>
-
-<p>The <strong><code>-ms-high-contrast</code></strong> media feature is specified as one of the following values.</p>
-
-<h3 id="Values">Values</h3>
-
-<dl>
- <dt><code>active</code></dt>
- <dd>
- <p>Indicates that the subsequent styling rules will be applied when the system is placed in high contrast mode with any color variation.</p>
- </dd>
- <dt><code>black-on-white</code></dt>
- <dd>
- <p>Indicates that the subsequent styling rules will be applied when the system is placed in high contrast mode with a black-on-white color variation.</p>
- </dd>
- <dt><code>white-on-black</code></dt>
- <dd>
- <p>Indicates that the subsequent styling rules will be applied when the system is placed in high contrast mode with a white-on-black color variation.</p>
- </dd>
-</dl>
-
-<h3 id="Example_2">Example</h3>
-
-<p>The following declarations will match applications that are being displayed in high contrast mode with any color variation, a black-on-white color variation, and a white-on-black color variation, respectively.</p>
-
-<pre class="brush: css notranslate">@media screen and (-ms-high-contrast: active) {
-  /* All high contrast styling rules */
-}
-@media screen and (-ms-high-contrast: black-on-white) {
-  div { background-image: url('image-bw.png'); }
-}
-@media screen and (-ms-high-contrast: white-on-black) {
-  div { background-image: url('image-wb.png'); }
-}
-</pre>
diff --git a/files/de/web/css/object-position/index.html b/files/de/web/css/object-position/index.html
deleted file mode 100644
index d42372ad90..0000000000
--- a/files/de/web/css/object-position/index.html
+++ /dev/null
@@ -1,147 +0,0 @@
----
-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>
-
-{{csssyntax}}
-
-<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/perspective-origin/index.html b/files/de/web/css/perspective-origin/index.html
deleted file mode 100644
index c1d0249b99..0000000000
--- a/files/de/web/css/perspective-origin/index.html
+++ /dev/null
@@ -1,391 +0,0 @@
----
-title: perspective-origin
-slug: Web/CSS/perspective-origin
-translation_of: Web/CSS/perspective-origin
----
-<div>{{CSSRef}}</div>
-
-<p>Die <a href="/de/docs/CSS">CSS</a>-Eigenschaft <strong><code>perspective-origin</code></strong> <a href="/en-US/docs/CSS">CSS</a> property determines the position at which the viewer is looking. It is used as the <em>vanishing point</em> by the {{cssxref("perspective")}} property.</p>
-
-<div>{{EmbedInteractiveExample("pages/css/perspective-origin.html")}}</div>
-
-
-
-<p>The <strong><code>perspective-origin</code> </strong>and {{cssxref('perspective')}} properties are attached to the parent of a child transformed in 3-dimensional space, unlike the <code><a href="/en-US/docs/Web/CSS/transform-function/perspective">perspective()</a></code> transform function which is placed on the element being transformed.</p>
-
-<h2 id="Syntax">Syntax</h2>
-
-<pre class="brush:css no-line-numbers notranslate">/* One-value syntax */
-perspective-origin: x-position;
-
-/* Two-value syntax */
-perspective-origin: x-position y-position;
-
-/* When both x-position and y-position are keywords,
-   the following is also valid */
-perspective-origin: y-position x-position;
-
-/* Global values */
-perspective-origin: inherit;
-perspective-origin: initial;
-perspective-origin: unset;
-</pre>
-
-<h3 id="Values">Values</h3>
-
-<dl>
- <dt><em>x-position</em></dt>
- <dd>Indicates the position of the abscissa of the <em>vanishing point</em>. It can have one of the following values:
- <ul>
-  <li>{{cssxref("&lt;length-percentage&gt;")}} indicating the position as an absolute length value or relative to the width of the element. The value may be negative.</li>
-  <li><code>left</code>, a keyword being a shortcut for the <code>0</code> length value.</li>
-  <li><code>center</code>, a keyword being a shortcut for the <code>50%</code> percentage value.</li>
-  <li><code>right</code>, a keyword being a shortcut for the <code>100%</code> percentage value.</li>
- </ul>
- </dd>
- <dt><em>y-position</em></dt>
- <dd>Indicates the position of the ordinate of the <em>vanishing point</em>. It can have one of the following values:
- <ul>
-  <li>{{cssxref("&lt;length-percentage&gt;")}} indicating the position as an absolute length value or relative to the height of the element. The value may be negative.</li>
-  <li><code>top</code>, a keyword being a shortcut for the <code>0</code> length value.</li>
-  <li><code>center</code>, a keyword being a shortcut for the <code>50%</code> percentage value.</li>
-  <li><code>bottom</code>, a keyword being a shortcut for the <code>100%</code> percentage value.</li>
- </ul>
- </dd>
-</dl>
-
-<h2 id="Formal_definition">Formal definition</h2>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Formal_syntax">Formal syntax</h2>
-
-{{csssyntax}}
-
-<h2 id="Examples">Examples</h2>
-
-<h3 id="Changing_the_perspective_origin">Changing the perspective origin</h3>
-
-<p>This example shows cubes with popular <code>perspective-origin</code> values.</p>
-
-<h4 id="HTML">HTML</h4>
-
-<pre class="brush: html notranslate">&lt;section&gt;
-
-&lt;figure&gt;
-  &lt;figcaption&gt;&lt;code&gt;perspective-origin: top left;&lt;/code&gt;&lt;/figcaption&gt;
-    &lt;div class="container"&gt;
-     &lt;div class="cube potl"&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;/figure&gt;
-
-&lt;figure&gt;
-  &lt;figcaption&gt;&lt;code&gt;perspective-origin: top;&lt;/code&gt;&lt;/figcaption&gt;
-   &lt;div class="container"&gt;
-    &lt;div class="cube potm"&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;/figure&gt;
-
-&lt;figure&gt;
-  &lt;figcaption&gt;&lt;code&gt;perspective-origin: top right;&lt;/code&gt;&lt;/figcaption&gt;
-  &lt;div class="container"&gt;
-    &lt;div class="cube potr"&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;/figure&gt;
-
-&lt;figure&gt;
-  &lt;figcaption&gt;&lt;code&gt;perspective-origin: left;&lt;/code&gt;&lt;/figcaption&gt;
-  &lt;div class="container"&gt;
-    &lt;div class="cube poml"&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;/figure&gt;
-
-&lt;figure&gt;
-  &lt;figcaption&gt;&lt;code&gt;perspective-origin: 50% 50%;&lt;/code&gt;&lt;/figcaption&gt;
-  &lt;div class="container"&gt;
-    &lt;div class="cube pomm"&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;/figure&gt;
-
-&lt;figure&gt;
-  &lt;figcaption&gt;&lt;code&gt;perspective-origin: right;&lt;/code&gt;&lt;/figcaption&gt;
-  &lt;div class="container"&gt;
-    &lt;div class="cube pomr"&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;/figure&gt;
-
-&lt;figure&gt;
-  &lt;figcaption&gt;&lt;code&gt;perspective-origin: bottom left;&lt;/code&gt;&lt;/figcaption&gt;
-  &lt;div class="container"&gt;
-    &lt;div class="cube pobl"&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;/figure&gt;
-
-&lt;figure&gt;
-  &lt;figcaption&gt;&lt;code&gt;perspective-origin: bottom;&lt;/code&gt;&lt;/figcaption&gt;
-  &lt;div class="container"&gt;
-    &lt;div class="cube pobm"&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;/figure&gt;
-
-&lt;figure&gt;
-  &lt;figcaption&gt;&lt;code&gt;perspective-origin: bottom right;&lt;/code&gt;&lt;/figcaption&gt;
-  &lt;div class="container"&gt;
-    &lt;div class="cube pobr"&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;/figure&gt;
-
-&lt;figure&gt;
-  &lt;figcaption&gt;&lt;code&gt;perspective-origin: -200% -200%;&lt;/code&gt;&lt;/figcaption&gt;
-  &lt;div class="container"&gt;
-    &lt;div class="cube po200200neg"&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;/figure&gt;
-
-&lt;figure&gt;
-  &lt;figcaption&gt;&lt;code&gt;perspective-origin: 200% 200%;&lt;/code&gt;&lt;/figcaption&gt;
-  &lt;div class="container"&gt;
-    &lt;div class="cube po200200pos"&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;/figure&gt;
-
-&lt;figure&gt;
-  &lt;figcaption&gt;&lt;code&gt;perspective-origin: 200% -200%;&lt;/code&gt;&lt;/figcaption&gt;
-  &lt;div class="container"&gt;
-    &lt;div class="cube po200200"&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;/figure&gt;
-
-&lt;/section&gt;
-</pre>
-
-<h4 id="CSS">CSS</h4>
-
-<pre class="brush: css notranslate">/* perspective-origin values (unique per example) */
-.potl {
-  perspective-origin: top left;
-}
-.potm {
-  perspective-origin: top;
-}
-.potr {
-  perspective-origin: top right;
-}
-.poml {
-  perspective-origin: left;
-}
-.pomm {
-  perspective-origin: 50% 50%;
-}
-.pomr {
-  perspective-origin: right;
-}
-.pobl {
-  perspective-origin: bottom left;
-}
-.pobm {
-  perspective-origin: bottom;
-}
-.pobr {
-  perspective-origin: bottom right;
-}
-.po200200neg {
-  perspective-origin: -200% -200%;
-}
-.po200200pos {
-  perspective-origin: 200% 200%;
-}
-.po200200 {
-  perspective-origin: 200% -200%;
-}
-
-/* Define the container div, the cube div, and a generic face */
-.container {
-  width: 100px;
-  height: 100px;
-  margin: 24px;
-  border: none;
-}
-
-.cube {
-  width: 100%;
-  height: 100%;
-  backface-visibility: visible;
-  perspective: 300px;
-  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;
-}
-
-/* Define each face based on direction */
-.front {
-  background: rgba(0, 0, 0, 0.3);
-  transform: translateZ(50px);
-}
-.back {
-  background: rgba(0, 255, 0, 1);
-  color: black;
-  transform: rotateY(180deg) translateZ(50px);
-}
-.right {
-  background: rgba(196, 0, 0, 0.7);
-  transform: rotateY(90deg) translateZ(50px);
-}
-.left {
-  background: rgba(0, 0, 196, 0.7);
-  transform: rotateY(-90deg) translateZ(50px);
-}
-.top {
-  background: rgba(196, 196, 0, 0.7);
-  transform: rotateX(90deg) translateZ(50px);
-}
-.bottom {
-  background: rgba(196, 0, 196, 0.7);
-  transform: rotateX(-90deg) translateZ(50px);
-}
-
-/* Make the layout a little nicer */
-section {
-  background-color: #EEE;
-  padding: 10px;
-  font-family: sans-serif;
-  text-align: left;
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-}</pre>
-
-<h4 id="Result">Result</h4>
-
-<p>{{EmbedLiveSample('Changing_the_perspective_origin', '100%', 700)}}</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('CSS Transforms 2', '#perspective-origin-property', 'perspective-origin')}}</td>
-   <td>{{Spec2('CSS Transforms 2')}}</td>
-   <td>Initial definition.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Browser compatibility</h2>
-
-<div>
-
-
-<p>{{Compat("css.properties.perspective-origin")}}</p>
-</div>
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">Using CSS Transforms</a></li>
- <li>{{cssxref('transform-style')}}</li>
- <li>{{cssxref('transform-function')}}</li>
- <li>{{cssxref('perspective')}}</li>
- <li><code><a href="/en-US/docs/Web/CSS/transform-function/perspective">transform: perspective()</a></code> function</li>
-</ul>
diff --git a/files/de/web/css/shorthand_properties/index.html b/files/de/web/css/shorthand_properties/index.html
deleted file mode 100644
index f5fbfabc44..0000000000
--- a/files/de/web/css/shorthand_properties/index.html
+++ /dev/null
@@ -1,159 +0,0 @@
----
-title: Kurzformat Eigenschaft
-slug: Web/CSS/Shorthand_properties
-translation_of: Web/CSS/Shorthand_properties
-original_slug: Web/CSS/Kurzformat_Eigenschaft
----
-<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/visual_formatting_model/index.html b/files/de/web/css/visual_formatting_model/index.html
deleted file mode 100644
index 01c9f8a5b9..0000000000
--- a/files/de/web/css/visual_formatting_model/index.html
+++ /dev/null
@@ -1,144 +0,0 @@
----
-title: CSS Visuelles Formatierungsmodell
-slug: Web/CSS/Visual_formatting_model
-translation_of: Web/CSS/Visual_formatting_model
----
-<div>{{CSSRef}}</div>
-
-<p class="summary">In CSS The <strong>Visual Formatting Model</strong> describes how user agents take the document tree, and process and display it for visual media. This includes {{glossary("continuous media")}} such as a computer screen and {{glossary("paged media")}} such as a book or document printed by browser print functions. Most of the information applies equally to continuous and paged media.</p>
-
-<p>In the visual formatting model, each element in the document tree generates zero or more boxes according to the box model. The layout of these boxes is governed by:</p>
-
-<ul>
- <li>Box dimensions and type.</li>
- <li>Positioning scheme (normal flow, float, and absolute positioning).</li>
- <li>Relationships between elements in the document tree.</li>
- <li>External information (e.g., viewport size, intrinsic dimensions of images, etc.).</li>
-</ul>
-
-<p>Much of the information about the visual formatting model is defined in CSS2, however, various level 3 specifications have added to this information. When reading specifications you will often find references to the model as defined in CSS2, so an understanding of the model and the terms used to describe it in CSS2 is valuable when reading other layout specifications.</p>
-
-<p>In this document we define the model and introduce some of the related terms and concepts, linking to more specific pages on MDN for further details.</p>
-
-<h2 id="The_role_of_the_viewport">The role of the viewport</h2>
-
-<p>In continuous media, the {{glossary("viewport")}} is the viewing area of the browser window. User agents can change the layout of the page when the viewport size changes — for example, if you resize your window, or change the orientation of a mobile device.</p>
-
-<p>If the viewport is smaller than the size of the document then the user agent needs to offer a way to scroll to the parts of the document that are not displayed. We most often see this as scrolling in the <strong>block dimension</strong> — vertically in a horizontal, top-to-bottom language. However, you might design something that requires scrolling in the <strong>inline dimension</strong> too.</p>
-
-<h2 id="Box_generation">Box generation</h2>
-
-<p><strong>Box generation</strong> is the part of the CSS visual formatting model that creates boxes from the document's elements. Generated boxes are of different types, which affect their visual formatting. The type of the box generated depends on the value of the CSS {{cssxref("display")}} property.</p>
-
-<p>Initially defined in CSS2, the <code>display</code> property is extended in the <a href="https://www.w3.org/TR/css-display-3/">CSS Display Module Level 3</a>. In addition, some of the terminologies around the display have been updated and clarified in the years since CSS2.</p>
-
-<p>CSS takes your source document and renders it onto a canvas. To do this, it generates an intermediary structure, the <strong>box tree</strong>, which represents the formatting structure of the rendered document. Each box in the box tree represents its corresponding element (or pseudo-element) in space and/or time on the canvas, while each text run in the box tree likewise represents the contents of its corresponding text nodes.</p>
-
-<p>Then, for each element, CSS generates zero or more boxes as specified by that element’s <code>display</code> property value.</p>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: Boxes are often referred to by their display type — e.g. a box generated by an element with <code>display: block</code> is called a "block box" or just a "block". Note however that block boxes, block-level boxes and box containers are all subtly different; see the {{anch("Block boxes")}} section below for more details.</p>
-</div>
-
-<h3 id="The_principal_box">The principal box</h3>
-
-<p>When an element generates one or more boxes, one of them is the <strong>principal box</strong>, which contains its descendant boxes and generated content in the box tree, and is also the box involved in any positioning scheme.</p>
-
-<p>Some elements may generate additional boxes in addition to the principal box, for example <code>display: list-item</code> generates more than one box (e.g. a <strong>principal block box</strong> and a <strong>child marker box</strong>). And some values (such as <code>none</code> or <code>contents</code>) cause the element and/or its descendants to not generate any boxes at all.</p>
-
-<h3 id="Anonymous_boxes">Anonymous boxes</h3>
-
-<p>An <strong>anonymous box</strong> is created when there is not an HTML element to use for the box. This situation happens when, for example, you declare <code>display: flex</code> on a parent element, and directly inside there is a run of text not contained in another element. In order to fix the box tree, an anonymous box is created around that run of text. It will then behave as a flex item, however, it cannot be targeted and styled like a regular box because there is no element to target.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/visual-formatting/anonymous-flex.html", '100%', 720)}}</p>
-
-<p>The same thing happens when you have text runs interspersed with block elements. In the next example I have a string inside a <code>&lt;div&gt;</code>; in the middle of my string is a <code>&lt;p&gt;</code> element containing part of the text.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/visual-formatting/anonymous-block.html", '100%', 720)}}</p>
-
-<p>The string is split into three boxes in the box tree. The part of the string before the paragraph element is wrapped in an anonymous box, then we have the <code>&lt;p&gt;</code>, which generates a box, and then another anonymous box.</p>
-
-<p>Something to consider about these anonymous boxes is that they inherit styles from their direct parent, but you cannot change how they look by targeting the anonymous box. In my examples, I am using a direct child selector to target the children of the container. This does not change the anonymous boxes, as they are not a child of the parent block.</p>
-
-<p><strong>Inline anonymous boxes</strong> are created when a string is split by an inline element, for example, a sentence that includes a section wrapped with <code>&lt;em&gt;&lt;/em&gt;</code>. This splits the sentence into three inline boxes — an anonymous inline box before the emphasized section, the section wrapped in the <code>&lt;em&gt;</code> element, then a final anonymous inline box. As with the anonymous block boxes, these anonymous inline boxes cannot be styled independently in the way the <code>&lt;em&gt;</code> can; they just inherit the styles of their container.</p>
-
-<p>Other formatting contexts also create anonymous boxes. <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">Grid Layout</a> behaves in the same way as the <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">flexbox</a> example above, turning strings of text into a grid item with an anonymous box. <a href="/en-US/docs/Web/CSS/CSS_Columns">Multiple-column</a> layout creates anonymous column boxes around the columns; these also cannot be styled or otherwise targetted. <a href="/en-US/docs/Web/CSS/CSS_Table">Table layout</a> will add anonymous boxes to create a proper table structure — for example adding an anonymous table row — if there was no box with <code>display: table-row</code>.</p>
-
-<h3 id="Line_boxes">Line boxes</h3>
-
-<p><strong>Line boxes</strong> are the boxes that wrap each line of text. You can see the difference between line boxes and their containing block if you float an item and then follow it by a block that has a background color.</p>
-
-<p>In the following example, the line boxes following the floated <code>&lt;div&gt;</code> are shortened to wrap around the float. The background of the box runs behind the float, as the floated item has been taken out of flow.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/visual-formatting/line-boxes.html", '100%', 720)}}</p>
-
-<h2 id="Positioning_schemes_and_in-flow_and_out-of-flow_elements">Positioning schemes and in-flow and out-of-flow elements</h2>
-
-<p>In CSS, a box may be laid out according to three positioning schemes — <strong>normal flow</strong>, <strong>floats</strong>, or <strong>absolute positioning</strong>.</p>
-
-<h3 id="Normal_flow">Normal flow</h3>
-
-<p>In CSS, the normal flow includes block-level formatting of block boxes, inline-level formatting of inline boxes, and also includes relative and sticky positioning of block-level and inline-level boxes.</p>
-
-<p>Read more about <a href="/en-US/docs/Web/CSS/CSS_Flow_Layout">flow layout</a> in CSS.</p>
-
-<h3 id="Floats">Floats</h3>
-
-<p>In the float model, a box is first laid out according to the normal flow, then taken out of the flow and positioned, typically to the left or right. Content may flow along the side of a float.</p>
-
-<p>Find out more about <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">floats</a>.</p>
-
-<h3 id="Absolute_positioning">Absolute positioning</h3>
-
-<p>In the absolute positioning model (which also includes fixed positioning), a box is removed from the normal flow entirely and assigned a position with respect to a containing block (which is the viewport in the case of fixed positioning).</p>
-
-<p>An element is called <strong>out of flow</strong> if it is floated, absolutely positioned, or is the root element. An element is called <strong>in-flow</strong> if it is not out of the flow.</p>
-
-<p>Read about <a href="/en-US/docs/Web/CSS/CSS_Positioning">CSS Positioned Layout</a>.</p>
-
-<h2 id="Formatting_contexts_and_the_display_property">Formatting contexts and the display property</h2>
-
-<p>Boxes can be described as having an <strong>outer display type</strong>, which is <code>block</code> or <code>inline</code>. This outer display type refers to how the box behaves alongside other elements on the page.</p>
-
-<p>Boxes also have an inner display type, dictating how their children behave. For normal block and inline layout, or normal flow, this display type is <code>flow</code>. This means that the child elements will also be either <code>block</code> or <code>inline</code>.</p>
-
-<p>However, the inner display type might be something like <code>grid</code> or <code>flex</code>, in which case the direct children will display as a grid, or flex items. In such a case the element is described as creating a grid or flex <a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts">formatting context</a>. In many ways this is similar to a block formatting context, however, the children behave as flex or grid items rather than items in normal flow.</p>
-
-<p>The interactions between block-level and inline-level boxes are described in the MDN documentation for {{cssxref("display")}}.</p>
-
-<p>In addition, the references for specific values of display explain how these formatting contexts work in terms of box layout.</p>
-
-<ul>
- <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
- <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexible Box Layout</a></li>
- <li><a href="/en-US/docs/Web/CSS/CSS_Table">CSS Table Layout</a></li>
- <li><a href="/en-US/docs/Web/CSS/CSS_Lists_and_Counters">Lists</a></li>
-</ul>
-
-<h3 id="Independent_formatting_contexts">Independent formatting contexts</h3>
-
-<p>Elements either participate in the formating context of their containing block or establish an independent formatting context. A grid container, for example, establishes a new <strong>Grid Formatting Context</strong> for its children.</p>
-
-<p><strong>Independent formatting contexts</strong> contain floats, and margins do not collapse across formatting context boundaries. Therefore, creating a new block formatting context can ensure that floats remain inside a box. Developers sometimes clear floats by changing the value of the {{cssxref("overflow")}} property, as this creates a new block formatting context. The newer value of <code>display: flow-root</code> creates a new <a href="/en-US/docs/Web/Guide/CSS/Block_formatting_context">block formatting context</a> in order to gain the useful effects of this, without any unwanted issues caused by changing the value of overflow.</p>
-
-<h3 id="Block_boxes">Block boxes</h3>
-
-<p>In specifications, block boxes, block-level boxes, and block containers are all referred to as <strong>block boxes</strong> in certain places. These things are somewhat different and the term block box should only be used if there is no ambiguity.</p>
-
-<h4 id="Block_containers">Block containers</h4>
-
-<p>A <strong>block container</strong> either contains only inline-level boxes participating in an inline formatting context, or only block-level boxes participating in a block formatting context. For this reason, we see the behavior explained above, where anonymous boxes are introduced to ensure all of the items can participate in a block or inline formatting context. An element is a block container only if it contains block-level or inline-level boxes.</p>
-
-<h4 id="Inline-level_and_block-level_boxes">Inline-level and block-level boxes</h4>
-
-<p>These are the boxes contained inside the block container that are participating in inline or block layout, respectively.</p>
-
-<h4 id="Block_boxes_2">Block boxes</h4>
-
-<p>A block box is a block-level box that is also a block container. As described in CSS <code>display</code>, it is possible for a box to be a block-level box, but not also a block container (it might be a flex or grid container for example).</p>
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li>{{css_key_concepts}}</li>
-</ul>
diff --git a/files/de/web/guide/mobile/index.html b/files/de/web/guide/mobile/index.html
deleted file mode 100644
index 11f17242c7..0000000000
--- a/files/de/web/guide/mobile/index.html
+++ /dev/null
@@ -1,19 +0,0 @@
----
-title: Mobile Web development
-slug: Web/Guide/Mobile
-tags:
-  - Mobile
-  - NeedsTranslation
-  - TopicStub
-  - Web Development
-translation_of: Web/Guide/Mobile
-translation_of_original: Web_Development/Mobile
-original_slug: Web_Development/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/html/applying_color/index.html b/files/de/web/html/applying_color/index.html
deleted file mode 100644
index 3e39d7bbcf..0000000000
--- a/files/de/web/html/applying_color/index.html
+++ /dev/null
@@ -1,498 +0,0 @@
----
-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/element/input/button/index.html b/files/de/web/html/element/input/button/index.html
deleted file mode 100644
index d36dc8944b..0000000000
--- a/files/de/web/html/element/input/button/index.html
+++ /dev/null
@@ -1,246 +0,0 @@
----
-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/th/index.html b/files/de/web/html/element/th/index.html
deleted file mode 100644
index fce82bc5ca..0000000000
--- a/files/de/web/html/element/th/index.html
+++ /dev/null
@@ -1,297 +0,0 @@
----
-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/global_attributes/is/index.html b/files/de/web/html/global_attributes/is/index.html
deleted file mode 100644
index 224c20c184..0000000000
--- a/files/de/web/html/global_attributes/is/index.html
+++ /dev/null
@@ -1,63 +0,0 @@
----
-title: is
-slug: Web/HTML/Global_attributes/is
-translation_of: Web/HTML/Global_attributes/is
-original_slug: Web/HTML/Globale_Attribute/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/http/headers/connection/index.html b/files/de/web/http/headers/connection/index.html
deleted file mode 100644
index 5b203cabcc..0000000000
--- a/files/de/web/http/headers/connection/index.html
+++ /dev/null
@@ -1,46 +0,0 @@
----
-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>{{Compat("http.headers.Connection")}}</p>
diff --git a/files/de/web/http/headers/set-cookie/samesite/index.html b/files/de/web/http/headers/set-cookie/samesite/index.html
deleted file mode 100644
index 84e0b68380..0000000000
--- a/files/de/web/http/headers/set-cookie/samesite/index.html
+++ /dev/null
@@ -1,133 +0,0 @@
----
-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>{{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/user-agent/index.html b/files/de/web/http/headers/user-agent/index.html
deleted file mode 100644
index b70e05c83a..0000000000
--- a/files/de/web/http/headers/user-agent/index.html
+++ /dev/null
@@ -1,137 +0,0 @@
----
-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>{{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/javascript/guide/modules/index.html b/files/de/web/javascript/guide/modules/index.html
deleted file mode 100644
index 3d006ec04c..0000000000
--- a/files/de/web/javascript/guide/modules/index.html
+++ /dev/null
@@ -1,446 +0,0 @@
----
-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="/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/reference/global_objects/object/__definegetter__/index.html b/files/de/web/javascript/reference/global_objects/object/__definegetter__/index.html
deleted file mode 100644
index 5e88304f5f..0000000000
--- a/files/de/web/javascript/reference/global_objects/object/__definegetter__/index.html
+++ /dev/null
@@ -1,150 +0,0 @@
----
-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/rangeerror/index.html b/files/de/web/javascript/reference/global_objects/rangeerror/index.html
deleted file mode 100644
index d66cd10c55..0000000000
--- a/files/de/web/javascript/reference/global_objects/rangeerror/index.html
+++ /dev/null
@@ -1,174 +0,0 @@
----
-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/manifest/short_name/index.html b/files/de/web/manifest/short_name/index.html
deleted file mode 100644
index 0a54ba4c3c..0000000000
--- a/files/de/web/manifest/short_name/index.html
+++ /dev/null
@@ -1,71 +0,0 @@
----
-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/xpath/introduction_to_using_xpath_in_javascript/index.html b/files/de/web/xpath/introduction_to_using_xpath_in_javascript/index.html
deleted file mode 100644
index 93dc70994e..0000000000
--- a/files/de/web/xpath/introduction_to_using_xpath_in_javascript/index.html
+++ /dev/null
@@ -1,412 +0,0 @@
----
-title: Einführung in den Gebrauch von XPath in JavaScript
-slug: Web/XPath/Introduction_to_using_XPath_in_JavaScript
-translation_of: Web/XPath/Introduction_to_using_XPath_in_JavaScript
-original_slug: Web/JavaScript/Einführung_in_den_Gebrauch_von_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>