From 9ace67d06f2369e3c770e3a11e06e1c8cc9f66fd Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Thu, 15 Jul 2021 12:58:54 -0400 Subject: delete pages that were never translated from en-US (de, part 1) (#1548) --- .../understanding_wcag/perceivable/index.html | 359 ------------ files/de/web/api/animationevent/index.html | 190 ------ files/de/web/api/audiocontext/index.html | 232 -------- .../setlinedash/index.html | 179 ------ files/de/web/api/eventtarget/index.html | 174 ------ files/de/web/api/file/getastext/index.html | 78 --- files/de/web/api/rtcpeerconnection/index.html | 379 ------------ files/de/web/api/webxr_device_api/index.html | 298 ---------- .../de/web/css/_doublecolon_placeholder/index.html | 150 ----- files/de/web/css/box-decoration-break/index.html | 136 ----- files/de/web/css/containing_block/index.html | 258 --------- files/de/web/css/css_values_and_units/index.html | 493 ---------------- .../media_queries/testing_media_queries/index.html | 88 --- .../media_queries/using_media_queries/index.html | 644 --------------------- .../index.html | 88 --- files/de/web/css/object-position/index.html | 147 ----- files/de/web/css/perspective-origin/index.html | 391 ------------- files/de/web/css/shorthand_properties/index.html | 159 ----- .../de/web/css/visual_formatting_model/index.html | 144 ----- files/de/web/guide/mobile/index.html | 19 - files/de/web/html/applying_color/index.html | 498 ---------------- files/de/web/html/element/input/button/index.html | 246 -------- files/de/web/html/element/th/index.html | 297 ---------- files/de/web/html/global_attributes/is/index.html | 63 -- files/de/web/http/headers/connection/index.html | 46 -- .../http/headers/set-cookie/samesite/index.html | 133 ----- files/de/web/http/headers/user-agent/index.html | 137 ----- files/de/web/javascript/guide/modules/index.html | 446 -------------- .../object/__definegetter__/index.html | 150 ----- .../reference/global_objects/rangeerror/index.html | 174 ------ files/de/web/manifest/short_name/index.html | 71 --- .../index.html | 412 ------------- 32 files changed, 7279 deletions(-) delete mode 100644 files/de/web/accessibility/understanding_wcag/perceivable/index.html delete mode 100644 files/de/web/api/animationevent/index.html delete mode 100644 files/de/web/api/audiocontext/index.html delete mode 100644 files/de/web/api/canvasrenderingcontext2d/setlinedash/index.html delete mode 100644 files/de/web/api/eventtarget/index.html delete mode 100644 files/de/web/api/file/getastext/index.html delete mode 100644 files/de/web/api/rtcpeerconnection/index.html delete mode 100644 files/de/web/api/webxr_device_api/index.html delete mode 100644 files/de/web/css/_doublecolon_placeholder/index.html delete mode 100644 files/de/web/css/box-decoration-break/index.html delete mode 100644 files/de/web/css/containing_block/index.html delete mode 100644 files/de/web/css/css_values_and_units/index.html delete mode 100644 files/de/web/css/media_queries/testing_media_queries/index.html delete mode 100644 files/de/web/css/media_queries/using_media_queries/index.html delete mode 100644 files/de/web/css/media_queries/using_media_queries_for_accessibility/index.html delete mode 100644 files/de/web/css/object-position/index.html delete mode 100644 files/de/web/css/perspective-origin/index.html delete mode 100644 files/de/web/css/shorthand_properties/index.html delete mode 100644 files/de/web/css/visual_formatting_model/index.html delete mode 100644 files/de/web/guide/mobile/index.html delete mode 100644 files/de/web/html/applying_color/index.html delete mode 100644 files/de/web/html/element/input/button/index.html delete mode 100644 files/de/web/html/element/th/index.html delete mode 100644 files/de/web/html/global_attributes/is/index.html delete mode 100644 files/de/web/http/headers/connection/index.html delete mode 100644 files/de/web/http/headers/set-cookie/samesite/index.html delete mode 100644 files/de/web/http/headers/user-agent/index.html delete mode 100644 files/de/web/javascript/guide/modules/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/object/__definegetter__/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/rangeerror/index.html delete mode 100644 files/de/web/manifest/short_name/index.html delete mode 100644 files/de/web/xpath/introduction_to_using_xpath_in_javascript/index.html (limited to 'files/de/web') 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 ---- -

This article provides practical advice on how to write your web content so that it conforms to the success criteria outlined in the Perceivable 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.

- -
-

Note: To read the W3C definitions for Perceivable and its guidelines and success criteria, see Principle 1: Perceivable - Information and user interface components must be presentable to users in ways they can perceive.

-
- -

Guideline 1.1 — Providing text alternatives for non-text content

- -

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.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Success criteriaHow to conform to the criteriaPractical resource
1.1.1 Provide text equivalents  (A)All images that convey meaningful content should be given suitable alternative text.Text alternatives.
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 longdesc attribute. -

A text description may work, or an accessible data table (see HTML table advanced features and accessibility). Also see Other text alternative mechanisms for the argument against longdesc.

-
Multimedia content (e.g. audio or video) should at least have a descriptive identification available (e.g. a caption or similar). -

See Text alternatives for static caption options, and Audio transcripts, Video text tracks, and Other multimedia content for other alternatives.

-
UI Controls such as form elements and buttons should have text labels that describe their purpose.Buttons are simple — you should make sure the button text describes the function of the button (e.g. <button>Upload image</button>). For further information on other UI controls, see UI controls.
Implement decorative (non-content) images, video, etc., in a way that is invisible to assistive technology, so it doesn't confuse users. -

Decorative images should be implemented using CSS background images (see Backgrounds).  If you have to include an image via an {{htmlelement("img")}} element, give it a blank alt (alt=""), otherwise screenreaders may try to read out the filepath, etc.

- -

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.

-
- -
-

Note: Also see the WCAG description for Guideline 1.1: Text alternatives.

-
- -

Guideline 1.2 — Providing text alternatives for time-based media

- -

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.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Success criteriaHow to conform to the criteriaPractical resource
1.2.1 Provide alternatives for pre-recorded audio-only and video-only content (A)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).See Audio transcripts for transcript information. No audio description tutorial available as yet.
1.2.2 Provide captions for web-based video (A)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.See Video text tracks for HTML5 video captions, and Other multimedia content for other technologies. See also Add your own subtitles & closed captions (YouTube).
1.2.3 Provide text transcript or audio description for web-based video (A)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.See Audio transcripts for transcript information. No audio description tutorial available as yet.
1.2.4 Provide captions for live audio (AA)You should provide synchronized captions for all live multimedia that contains audio (e.g. video conferences, live audio broadcasts.) 
1.2.5 Provide audio descriptions for prerecorded video (AA)Audio descriptions should be provided for prerecorded video, but only where the existing audio does not convey the full meaning expressed by the video. 
1.2.6 Provide sign language equivalent to prerecorded audio (AAA)An equivalent sign language video should be provided for any prerecorded content containing audio. 
1.2.7 Provide extended video with audio descriptions (AAA)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). 
1.2.8 Provide an alternative for prerecorded media (AAA)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.See Audio transcripts for transcript information.
1.2.9 Provide a transcript for live audio (AAA)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.See Audio transcripts for transcript information.
- -
-

Note: Also see the WCAG description for Guideline 1.2: Time-based Media: Provide alternatives for time-based media.

-
- -

Guideline 1.3 — Create content that can be presented in different ways

- -

This guideline refers to the ability of content to be consumed by users in multiple ways, accomodating their differing needs.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Success criteriaHow to conform to the criteriaPractical resource
1.3.1 Info and relationships (A) -

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:

- -
    -
  • Text labels and the form elements they describe are associated unambiguously using the {{htmlelement("label")}} element, which can be picked up by screenreaders, etc.
    • -
  • 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. alt 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.
    • -
  • Lists — if the order of list items is important, and ordered list should be used ({{htmlelement("ol")}}).
    • -
- 		The whole of -

HTML: A good basis for accessibility is packed with information about this, but you should particularly refer to Good semantics, UI controls, and Text alternatives.

-
1.3.2 Meaningful content sequence (A)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.Again, refer to HTML: A good basis for accessibility.
1.3.3 Sensory characteristics (A) -

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:

- -
    -
  • "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.
    • -
  • "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.
    • -
  • "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.
    • -
- -
-

Note: Conveying instructions solely by color is related, but covered in a different guideline — 1.4.1.

-
- 		 
1.3.4 Orientation (AA) added in 2.1Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential. -

Understanding Orientation 

-
1.3.5 Identify Input Purpose (AA) added in 2.1 -

 

- -

Follow the list of 53 input fields to programmatically identify the purpose of a field.   

- 		Understanding Identify Input Purpose
1.3.6 Identify Purpose (AAA) added in 2.1In content implemented using markup languages, the purpose of User Interface Components, icons, and regions can be programmatically determined.Understanding Identify Purpose
- -
-

Note: Also see the WCAG description for Guideline 1.3: Adaptable: Create content that can be presented in different ways without losing information or structure.

-
- -

Guideline 1.4: Make it easier for users to see and hear content including separating foreground from background

- -

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.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Success criteriaHow to conform to the criteriaPractical resource
1.4.1 Use of color (A) -

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.

- 		See Color and color contrast and Multiple labels.
1.4.2 Audio controls (A)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.Use native <button>s to provide accessible keyboard controls, as shown in Video player syling basics.
1.4.3 Minimum contrast (AA) -

The color contrast between background and foreground content should be at a minimum level to ensure legibility:

- -
    -
  • Text and its background should have a contrast ratio of at least 4.5.1.
    • -
  • 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.
    • -
- 		See Color and color contrast.
1.4.4 Resize text (AA)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. 
1.4.5 Images of text (AA)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. 
1.4.6 Enhanced contrast (AAA) -

This follows, and builds on, criterion 1.4.3.

- -
    -
  • Text and its background should have a contrast ratio of at least 7.1.
    • -
  • 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.
    • -
- 		See Color and color contrast.
1.4.7 Low or no background audio (AAA)Prerecorded audio recordings that primarily feature speech should have minimal background noise, so the content can be easily understood. 
1.4.8 Visual presentation (AAA) -

For text content presentation, the following should be true:

- -
    -
  • Foreground and background colors should be user-selectable.
    • -
  • Text blocks should be no wider than 80 characters (or glyphs), for maximum readability.
    • -
  • Text should not be fully justified (e.g. text-align: justify;)
    • -
  • line height should be at least 1.5 times the text size within paragraphs (e.g. line-height: 1.5;), and at least 2.25 times the text size between paragraphs (e.g. padding: 2.25rem;)
    • -
  • When the text size is doubled, the content should not need to be scrolled.
    • -
- 		 
1.4.9 Images of text (No Exception) (AAA)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. 
1.4.10 Reflow (AA) added in 2.1 -
    -
  • No horizontal scrolling for right-to-left languages (like English) or left-to-right languages (like Arabic)   
    • -
  • No vertical scrolling for top-to-bottom languages (like Japanese)
    • -
  • Except for parts of the content which require two-dimensional layout for usage or meaning (like a large data table).
    • -
- 		Understanding Reflow
1.4.11 Non-Text Contrast(AA) added in 2.1Minimum color contrast ratio of 3 to 1 for user interface components and graphical objects. Understanding Non-Text Contrast
1.4.12 Text Spacing (AA) added in 2.1 -

No loss of content or functionality occurs when the following styles are applied: 

- -
    -
  • Line height (line spacing) to at least 1.5 times the font size;
    • -
  • Spacing following paragraphs to at least 2 times the font size;
    • -
  • Letter spacing (tracking) to at least 0.12 times the font size;
    • -
  • Word spacing to at least 0.16 times the font size.
    • -
- 		Understanding Text Spacing
1.4.13 Content on Hover or Focus (AA) added in 2.1 -

Additional content appear and disappear in coordination with hover and keyboard focus, this success criterion specifies three conditions that must be met:

- -
    -
  • dismissable (can be closed/removed)
    • -
  • hoverable (the additional content does not disappear when the pointer is over it) 
    • -
  • persistent (the additional content does not disappear without user action)
    • -
- 		Understanding Content on Hover or Focus
- -
-

Note: Also see the WCAG description for Guideline 1.4: Distinguishable: Make it easier for users to see and hear content including separating foreground from background..

-
- -

 

- -

See Also

- - - -

 

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 ---- -

{{SeeCompatTable}}{{APIRef("Web Animations API")}}

- -

The AnimationEvent interface represents events providing information related to animations.

- -

{{InheritanceDiagram}}

- -

Properties

- -

Also inherits properties from its parent {{domxref("Event")}}.

- -
-
{{domxref("AnimationEvent.animationName")}} {{readonlyInline}}
-
Is a {{domxref("DOMString")}} containing the value of the {{cssxref("animation-name")}} CSS property associated with the transition.
-
{{domxref("AnimationEvent.elapsedTime")}} {{readonlyInline}}
-
Is a float 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 "animationstart" event, elapsedTime is 0.0 unless there was a negative value for {{cssxref("animation-delay")}}, in which case the event will be fired with elapsedTime containing  (-1 * delay).
-
{{domxref("AnimationEvent.pseudoElement")}} {{readonlyInline}}
-
Is a {{domxref("DOMString")}}, starting with '::', containing the name of the pseudo-element the animation runs on. If the animation doesn't run on a pseudo-element but on the element, an empty string: ''.
-
- -

Constructor

- -
-
{{domxref("AnimationEvent.AnimationEvent", "AnimationEvent()")}}
-
Creates an AnimationEvent event with the given parameters.
-
- -

Methods

- -

Also inherits methods from its parent {{domxref("Event")}}.

- -
-
{{domxref("AnimationEvent.initAnimationEvent()")}} {{non-standard_inline}}{{deprecated_inline}}
-
Initializes a AnimationEvent created using the deprecated {{domxref("Document.createEvent()", "Document.createEvent(\"AnimationEvent\")")}} method.
-
- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('CSS3 Animations', '#AnimationEvent-interface', 'AnimationEvent') }}{{ Spec2('CSS3 Animations') }}Initial definition.
- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support -

1.0 {{ property_prefix("webkit") }}

- -

{{CompatChrome(43.0)}}

- 		{{ CompatGeckoDesktop("6.0") }}10.012 {{ property_prefix("o") }}
- 12.10
- 15.0 {{ property_prefix("webkit") }}		4.0 {{ property_prefix("webkit") }}
AnimationEvent() constructor -

{{CompatChrome(43.0)}}

- 		{{ CompatGeckoDesktop("23.0") }}{{CompatNo}}{{CompatNo}}{{CompatNo}}
initAnimationEvent() {{non-standard_inline}}{{deprecated_inline}}1.0{{ CompatGeckoDesktop("6.0") }}
- Removed in {{ CompatGeckoDesktop("23.0") }}		10.0124.0
pseudoelement{{CompatNo}}{{ CompatGeckoDesktop("23.0") }}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatVersionUnknown}}{{ property_prefix("webkit") }}{{ CompatGeckoMobile("6.0") }}10.012 {{ property_prefix("o") }}
- 12.10
- 15.0 {{ property_prefix("webkit") }}		{{CompatVersionUnknown}}{{ property_prefix("webkit") }}{{CompatChrome(43.0)}}
AnimationEvent() constructor{{CompatNo}}{{ CompatGeckoMobile("23.0") }}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(43.0)}}
initAnimationEvent() {{non-standard_inline}}{{deprecated_inline}}{{CompatVersionUnknown}}{{ CompatGeckoMobile("6.0") }}
- Removed in {{ CompatGeckoMobile("23.0") }}		10.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}
pseudoelement{{CompatNo}}{{ CompatGeckoMobile("23.0") }}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

See also

- - 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 ---- -

{{APIRef("Web Audio API")}}

- -
-

Die AudioContext 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.

-
- -

Ein AudioContext kann das Ziel von Events sein, aufgrund dessen unterstützt er auch die {{domxref("EventTarget")}} Schnittstelle.

- -

Eigenschaften

- -
-
{{domxref("AudioContext.currentTime")}} {{readonlyInline}}
-
Returns a double representing an ever-increasing hardware time in seconds used for scheduling. It starts at 0.
-
{{domxref("AudioContext.destination")}} {{readonlyInline}}
-
Returns an {{domxref("AudioDestinationNode")}} representing the final destination of all audio in the context. It can be thought of as the audio-rendering device.
-
{{domxref("AudioContext.listener")}} {{readonlyInline}}
-
Returns the {{domxref("AudioListener")}} object, used for 3D spatialization.
-
{{domxref("AudioContext.sampleRate")}} {{readonlyInline}}
-
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.
-
{{domxref("AudioContext.state")}} {{readonlyInline}}
-
Returns the current state of the AudioContext.
-
{{domxref("AudioContext.mozAudioChannelType")}} {{ non-standard_inline() }} {{readonlyInline}}
-
Used to return the audio channel that the sound playing in an {{domxref("AudioContext")}} will play in, on a Firefox OS device.
-
- -

Event handlers

- -
-
{{domxref("AudioContext.onstatechange")}}
-
An event handler that runs when an event of type {{event("statechange")}} has fired. This occurs when the AudioContext's state changes, due to the calling of one of the state change methods ({{domxref("AudioContext.suspend")}}, {{domxref("AudioContext.resume")}}, or {{domxref("AudioContext.close")}}.)
-
- -

Methoden

- -

Implementiert zusätzlich die Methoden der Schnittstelle {{domxref("EventTarget")}}.

- -
-
{{domxref("AudioContext.close()")}}
-
Closes the audio context, releasing any system audio resources that it uses.
-
{{domxref("AudioContext.createBuffer()")}}
-
Creates a new, empty {{ domxref("AudioBuffer") }} object, which can then be populated by data and played via an {{ domxref("AudioBufferSourceNode") }}.
-
{{domxref("AudioContext.createBufferSource()")}}
-
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.
-
{{domxref("AudioContext.createMediaElementSource()")}}
-
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.
-
{{domxref("AudioContext.createMediaStreamSource()")}}
-
Creates a {{domxref("MediaStreamAudioSourceNode")}} associated with a {{domxref("MediaStream")}} representing an audio stream which may come from the local computer microphone or other sources.
-
{{domxref("AudioContext.createMediaStreamDestination()")}}
-
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.
-
{{domxref("AudioContext.createScriptProcessor()")}}
-
Creates a {{domxref("ScriptProcessorNode")}}, which can be used for direct audio processing via JavaScript.
-
{{domxref("AudioContext.createStereoPanner()")}}
-
Creates a {{domxref("StereoPannerNode")}}, which can be used to apply stereo panning to an audio source.
-
{{domxref("AudioContext.createAnalyser()")}}
-
Creates an {{domxref("AnalyserNode")}}, which can be used to expose audio time and frequency data and for example to create data visualisations.
-
{{domxref("AudioContext.createBiquadFilter()")}}
-
Creates a {{domxref("BiquadFilterNode")}}, which represents a second order filter configurable as several different common filter types: high-pass, low-pass, band-pass, etc.
-
{{domxref("AudioContext.createChannelMerger()")}}
-
Creates a {{domxref("ChannelMergerNode")}}, which is used to combine channels from multiple audio streams into a single audio stream.
-
{{domxref("AudioContext.createChannelSplitter()")}}
-
Creates a {{domxref("ChannelSplitterNode")}}, which is used to access the individual channels of an audio stream and process them separately.
-
{{domxref("AudioContext.createConvolver()")}}
-
Creates a {{domxref("ConvolverNode")}}, which can be used to apply convolution effects to your audio graph, for example a reverberation effect.
-
{{domxref("AudioContext.createDelay()")}}
-
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.
-
{{domxref("AudioContext.createDynamicsCompressor()")}}
-
Creates a {{domxref("DynamicsCompressorNode")}}, which can be used to apply acoustic compression to an audio signal.
-
{{domxref("AudioContext.createGain()")}}
-
Creates a {{domxref("GainNode")}}, which can be used to control the overall volume of the audio graph.
-
{{domxref("AudioContext.createOscillator()")}}
-
Creates an {{domxref("OscillatorNode")}}, a source representing a periodic waveform. It basically generates a tone.
-
{{domxref("AudioContext.createPanner()")}}
-
Creates a {{domxref("PannerNode")}}, which is used to spatialise an incoming audio stream in 3D space.
-
{{domxref("AudioContext.createPeriodicWave()")}}
-
Creates a {{domxref("PeriodicWave")}}, used to define a periodic waveform that can be used to determine the output of an {{ domxref("OscillatorNode") }}.
-
{{domxref("AudioContext.createWaveShaper()")}}
-
Creates a {{domxref("WaveShaperNode")}}, which is used to implement non-linear distortion effects.
-
{{domxref("AudioContext.createAudioWorker()")}}
-
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.
-
{{domxref("AudioContext.decodeAudioData()")}}
-
Asynchronously decodes audio file data contained in an {{domxref("ArrayBuffer")}}. In this case, the ArrayBuffer is usually loaded from an {{domxref("XMLHttpRequest")}}'s response attribute after setting the responseType to arraybuffer. This method only works on complete files, not fragments of audio files.
-
{{domxref("AudioContext.resume()")}}
-
Resumes the progression of time in an audio context that has previously been suspended.
-
{{domxref("AudioContext.suspend()")}}
-
Suspends the progression of time in the audio context, temporarily halting audio hardware access and reducing CPU/battery usage in the process.
-
- -

Obsolete Methoden

- -
-
{{domxref("AudioContext.createJavaScriptNode()")}}
-
Creates a {{domxref("JavaScriptNode")}}, used for direct audio processing via JavaScript. This method is obsolete, and has been replaced by {{domxref("AudioContext.createScriptProcessor()")}}.
-
{{domxref("AudioContext.createWaveTable()")}}
-
Creates a {{domxref("WaveTableNode")}}, used to define a periodic waveform. This method is obsolete, and has been replaced by {{domxref("AudioContext.createPeriodicWave()")}}.
-
- -

Beispiele

- -

Grundsätzliche Deklarierung eines Audio Kontextes:

- -
var audioCtx = new AudioContext();
- -

Browserunabhängige Variante:

- -
var AudioContext = window.AudioContext || window.webkitAudioContext;
-var audioCtx = new AudioContext();
-
-var oscillatorNode = audioCtx.createOscillator();
-var gainNode = audioCtx.createGain();
-var finish = audioCtx.destination;
-// etc.
- -

Spezifikationen

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Web Audio API', '#the-audiocontext-interface', 'AudioContext')}}{{Spec2('Web Audio API')}} 
- -

Browserkompatibilität

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}
- 35		{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
- 22		6.0{{property_prefix("webkit")}}
createStereoPanner(){{CompatChrome(42.0)}}{{CompatGeckoDesktop(37.0)}} {{CompatNo}}{{CompatNo}}{{CompatNo}}
onstatechange, state, suspend(), resume(){{CompatVersionUnknown}}{{CompatGeckoDesktop(40.0)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatGeckoDesktop(37.0)}} 2.2{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}
createStereoPanner(){{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}
onstatechange, state, suspend(), resume(){{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}
-
- -

Siehe auch

- - 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 ---- -
{{APIRef}}
- -

The CanvasRenderingContext2D.setLineDash() method of the Canvas 2D API sets the line dash pattern.

- -

Syntax

- -
void ctx.setLineDash(segments);
-
- -

Parameters

- -
-
segments
-
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, [5, 15, 25] will become [5, 15, 25, 5, 15, 25]. An empty array clears the dashes, so that a solid line will be drawn.
-
- -

Examples

- -

Using the setLineDash method

- -

This is just a simple code snippet which uses the setLineDash method to draw a dashed line.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
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();
-
- -

Edit the code below and see your changes update live in the canvas:

- - - -

{{ EmbedLiveSample('Playable_code', 700, 360) }}

- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-setlinedash", "CanvasRenderingContext2D.setLineDash")}}{{Spec2('HTML WHATWG')}} 
- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{ CompatGeckoDesktop(27) }}{{ CompatIE(11) }}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{ CompatGeckoMobile(27) }}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Gecko-specific notes

- - - -

WebKit-specific notes

- - - -

See also

- - 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 ---- -

{{ApiRef("DOM Events")}}

- -

EventTarget is an interface implemented by objects that can receive events and may have listeners for them.

- -

{{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.

- -

Many event targets (including elements, documents, and windows) also support setting event handlers via on... properties and attributes.

- -

Methods

- -
-
{{domxref("EventTarget.addEventListener()")}}
-
Register an event handler of a specific event type on the EventTarget.
-
{{domxref("EventTarget.removeEventListener()")}}
-
Removes an event listener from the EventTarget.
-
{{domxref("EventTarget.dispatchEvent()")}}
-
Dispatch an event to this EventTarget.
-
- -

Additional methods for Mozilla chrome code

- -

Mozilla extensions for use by JS-implemented event targets to implement on* properties. See also WebIDL bindings.

- - - -

Example:

- -

Simple implementation of EventTarget

- -
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 < 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 < l; i++) {
-    stack[i].call(this, event);
-  }
-  return !event.defaultPrevented;
-};
-
- -

{{ EmbedLiveSample('_Simple_implementation_of_EventTarget') }}

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#interface-eventtarget', 'EventTarget')}}{{Spec2('DOM WHATWG')}}No change.
{{SpecName('DOM3 Events', 'DOM3-Events.html#interface-EventTarget', 'EventTarget')}}{{Spec2('DOM3 Events')}}A few parameters are now optional (listener), or accepts the null value (useCapture).
{{SpecName('DOM2 Events', 'events.html#Events-EventTarget', 'EventTarget')}}{{Spec2('DOM2 Events')}}Initial definition.
- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}9.071.0[1]
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.0{{CompatVersionUnknown}}{{CompatGeckoMobile("1")}}9.06.01.0
-
- -

[1] window.EventTarget does not exist.

- -

See Also

- - 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 ---- -

{{APIRef("File API") }}{{non-standard_header}}

- -

{{deprecated_header(7.0)}}

- -

Summary

- -

The getAsText method provides the file's data interpreted as text using a given encoding.

- -
-

Note: This method is obsolete; you should use the {{domxref("FileReader")}} method {{domxref("FileReader.readAsText()","readAsText()")}} instead.

-
- -

Syntaxe

- -
var str = instanceOfFile.getAsText(encoding);
- -

Parameters

- -
-
encoding
-
A string indicating the encoding to use for the returned data. If this string is empty, UTF-8 is assumed.
-
- -

Returns

- -

A string containing the file's data interpreted as text in the specified encoding.

- -

Example

- -
// fileInput is a HTMLInputElement: 
-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 < files.length; i++) {
-  file = files[i];
-
-  // if file type could be detected
-  if (file !== null) {
-    if (accept.text.indexOf(file.mediaType) > -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) > -1) {
-      // binary
-    }
-  }
-}
- -

Specification

- -

Not part of any specification.

- -

See also

- - 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 ---- -

{{APIRef}}{{SeeCompatTable}}

- -

The RTCPeerConnection 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.

- -
-

Note: RTCPeerConnection 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:

- -
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;
-
- -

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.

-
- -

Basic usage

- -

Basic RTCPeerConnection usage involves negotiating a connection between your local machine and a remote one by generating Session Description Protocol 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.

- -

Both parties (the caller and the called party) need to set up their own RTCPeerConnection instances to represent their end of the peer-to-peer connection:

- -
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 < videos.length; i++) {
-    videos[i].pause();
-  }
-
-  pc.close();
-}
-
-function error(err) {
-  endCall();
-}
-
- -

Initializing the call

- -

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 RTCPeerConnection. 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.

- -
// 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.addStream(stream);
-
-  pc.createOffer(function(offer) {
-    pc.setLocalDescription(new RTCSessionDescription(offer), function() {
-      // send the offer to a server to be forwarded to the friend you're calling.
-    }, error);
-  }, error);
-});
-
- -

Answering a call

- -

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 RTCPeerConnection. An {{domxref("RTCSessionDescription")}} object is created and set up as the remote description by calling {{domxref("RTCPeerConnection.setRemoteDescription()")}}.

- -

Then an answer is created using {{domxref("RTCPeerConnection.createAnswer()")}} and sent back to the server, which forwards it to the caller.

- -
var offer = getOfferFromFriend();
-navigator.getUserMedia({video: true}, function(stream) {
-  pc.onaddstream({stream: stream});
-  pc.addStream(stream);
-
-  pc.setRemoteDescription(new RTCSessionDescription(offer), function() {
-    pc.createAnswer(function(answer) {
-      pc.setLocalDescription(new RTCSessionDescription(answer), function() {
-        // send the answer to a server to be forwarded back to the caller (you)
-      }, error);
-    }, error);
-  }, error);
-});
-
- -

Handling the answer

- -

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.

- -
// pc was set up earlier when we made the original offer
-var offer = getResponseFromFriend();
-pc.setRemoteDescription(new RTCSessionDescription(offer), function() { }, error);
-
- -

Constructor

- -
-
{{domxref("RTCPeerConnection.RTCPeerConnection", "RTCPeerConnection()")}}
-
Constructor; returns a new RTCPeerConnection object.
-
- -

Properties

- -

This interface inherits properties from its parent interface, {{domxref("EventTarget")}}.

- -
-
{{domxref("RTCPeerConnection.iceConnectionState")}} {{ReadOnlyInline}}
-
Returns an enum of type RTCIceConnectionState that describes the ICE connection state for the connection. When this value changes, a {{event("iceconnectionstatechange")}} event is fired on the object.
-
{{domxref("RTCPeerConnection.iceGatheringState")}} {{ReadOnlyInline}}
-
Returns an enum of type RTCIceGatheringState that describes the ICE gathering state for the connection.
-
{{domxref("RTCPeerConnection.localDescription")}} {{ReadOnlyInline}}
-
Returns a {{domxref("RTCSessionDescription")}} describing the session for the local end of the connection. If it has not yet been set, it can be null.
-
{{domxref("RTCPeerConnection.peerIdentity")}} {{ReadOnlyInline}}
-
Returns a RTCIdentityAssertion, that is a couple of a domain name (idp) and a name (name) 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 null. Once set, via the appropriate method, it can't be changed.
-
{{domxref("RTCPeerConnection.remoteDescription")}} {{ReadOnlyInline}}
-
Returns a {{domxref("RTCSessionDescription")}} describing the session for the remote end of the connection. If it has not yet been set, it can be null.
-
{{domxref("RTCPeerConnection.signalingState")}} {{ReadOnlyInline}}
-
Returns an enum of type RTCSignalingState 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.
-
- -

Event handlers

- -
-
{{domxref("RTCPeerConnection.onaddstream")}}
-
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.
-
{{domxref("RTCPeerConnection.ondatachannel")}}
-
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.
-
{{domxref("RTCPeerConnection.onicecandidate")}}
-
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.
-
{{domxref("RTCPeerConnection.oniceconnectionstatechange")}}
-
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.
-
{{domxref("RTCPeerConnection.onidentityresult")}}
-
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.
-
{{domxref("RTCPeerConnection.onidpassertionerror")}}
-
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.
-
{{domxref("RTCPeerConnection.onidpvalidationerror")}}
-
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.
-
{{domxref("RTCPeerConnection.onnegotiationneeded")}}
-
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.
-
{{domxref("RTCPeerConnection.onpeeridentity")}}
-
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.
-
{{domxref("RTCPeerConnection.onremovestream")}}
-
Is the event handler called when the {{event("removestream")}} event, sent when a {{domxref("MediaStream")}} is removed from this connection, is received.
-
{{domxref("RTCPeerConnection.onsignalingstatechange")}}
-
Is the event handler called when the {{event("signalingstatechange")}} event, sent when the value of {{domxref("RTCPeerConnection.signalingState", "signalingState")}} changes, is received.
-
- -

Methods

- -
-
{{domxref("RTCPeerConnection.addIceCandidate()")}}
-
 
-
{{domxref("RTCPeerConnection.addStream()")}}
-
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.
-
{{domxref("RTCPeerConnection.close()")}}
-
Abruptly closes a connection.
-
{{domxref("RTCPeerConnection.createAnswer()")}}
-
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.
-
{{domxref("RTCPeerConnection.createDataChannel()")}}
-
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.
-
{{domxref("RTCPeerConnection.createDTMFSender()")}}
-
Creates a new {{domxref("RTCDTMFSender")}}, associated to a specific {{domxref("MediaStreamTrack")}}, that will be able to send {{Glossary("DTMF")}} phone signaling over the connection.
-
{{domxref("RTCPeerConnection.createOffer()")}}
-
Creates a request to find a remote peer with a specific configuration. 
-
{{domxref("RTCPeerConnection.generateCertificate()")}}
-
Creates and stores an X.509 certificate and corresponding private key then returns an {{domxref("RTCCertificate")}}, providing access to it.
-
{{domxref("RTCPeerConnection.getConfiguration()")}}
-
 
-
{{domxref("RTCPeerConnection.getIdentityAssertion()")}}
-
Initiates the gathering of an identity assertion. This has an effect only if the {{domxref("RTCPeerConnection.signalingState", "signalingState")}} is not "closed". It is not expected for the application dealing with the RTCPeerConnection: this is automatically done; an explicit call only allows to anticipate the need.
-
{{domxref("RTCPeerConnection.getLocalStreams()")}}
-
Returns an array of {{domxref("MediaStream")}} associated with the local end of the connection. The array may be empty.
-
{{domxref("RTCPeerConnection.getRemoteStreams()")}}
-
Returns an array of {{domxref("MediaStream")}} associated with the remote end of the connection. The array may be empty.
-
{{domxref("RTCPeerConnection.getStats()")}}
-
Creates a new {{domxref("RTCStatsReport")}} that contains and allows access to statistics regarding the connection.
-
{{domxref("RTCPeerConnection.getStreamById()")}}
-
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 null.
-
{{domxref("RTCPeerConnection.removeStream()")}}
-
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.
-
{{domxref("RTCPeerConnection.setIdentityProvider()")}}
-
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.
-
{{domxref("RTCPeerConnection.setLocalDescription()")}}
-
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.
-
{{domxref("RTCPeerConnection.setRemoteDescription()")}}
-
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.
-
{{domxref("RTCPeerConnection.updateIce()")}}
-
 
-
- -

Constructor

- -
new RTCPeerConnection({{domxref("RTCConfiguration")}} configuration, optional {{domxref("MediaConstraints")}} constraints);
- -
-

Note: While the PeerConnection specification reads like passing an RTCConfiguration object is required, Firefox will supply a default if you don't.

-
- -

Methods

- -

createOffer

- -

void createOffer({{domxref("RTCSessionDescriptionCallback")}} successCallback, {{domxref("RTCPeerConnectionErrorCallback")}} failureCallback, optional {{domxref("MediaConstraints")}} constraints);

- -

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.

- -

Example

- -
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
-  });
-}
- -

Arguments

- -
-
successCallback
-
An {{domxref("RTCSessionDescriptionCallback")}} which will be passed a single {{domxref("RTCSessionDescription")}} object
-
errorCallback
-
An {{domxref("RTCPeerConnectionErrorCallback")}} which will be passed a single {{domxref("DOMError")}} object
-
[optional] constraints
-
An optional {{domxref("MediaConstraints")}} object.
-
- -

createAnswer

- -

void createAnswer({{domxref("RTCSessionDescriptionCallback")}} successCallback, {{domxref("RTCPeerConnectionErrorCallback")}} failureCallback, optional {{domxref("MediaConstraints")}} constraints)")

- -

Respond to an offer sent from a remote connection.

- -

Example

- -
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
-    })
-  })
-});
- -

Arguments

- -
-
successCallback
-
An {{domxref("RTCSessionDescriptionCallback")}} which will be passed a single {{domxref("RTCSessionDescription")}} object
-
errorCallback
-
An {{domxref("RTCPeerConnectionErrorCallback")}} which will be passed a single {{domxref("DOMError")}} object
-
[optional] constraints
-
An optional {{domxref("MediaConstraints")}} object.
-
- -

updateIce()

- -

updateIce(optional {{domxref("RTCConfiguration")}} configuration, optional {{domxref("MediaConstraints")}} constraints)

- -

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.

- -

Example

- -
 
- -

addIceCandidate()

- -

addIceCandidate ({{domxref("RTCIceCandidate")}} candidate, {{domxref("Function")}} successCallback, {{domxref("RTCPeerConnectionErrorCallback")}} failureCallback);

- -

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.

- -

Example

- -
  pc.addIceCandidate(new RTCIceCandidate(candidate));
-
- -

createDataChannel

- -

{{domxref("RTCDataChannel")}} createDataChannel ({{domxref("DOMString")}} label, optional {{domxref("RTCDataChannelInit")}} dataChannelDict);

- -

Creates a data channel for sending non video or audio data across the peer connection

- -

Example

- -
var pc = new PeerConnection();
-var channel = pc.createDataChannel("Mydata");
-channel.onopen = function(event) {
-  channel.send('sending a message');
-}
-channel.onmessage = function(event) { console.log(event.data); }
- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('WebRTC 1.0')}}{{Spec2('WebRTC 1.0')}}Initial definition.
- -

Browser compatibility

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}    
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatVersionUnknown}}     {{CompatVersionUnknown}}
-
- -

See also

- - 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 ---- -

{{APIRef("WebXR Device API")}}{{Draft}}

- -

WebXR 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(Virtuelle Realitätoder VR )entwickelt wurde, oder um der realen Welt grafische Bilder hinzuzufügen (Augmented Realityoder AR). Die WebXR-Geräte-API 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.

- -

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.

- -

Um dies zu erreichen, bietet die WebXR-Geräte-API die folgenden Schlüsselfunktionen:

- - - -

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.

- -

Da WebGL 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 three.js.

- -

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.

- -

Wichtige Gesundheits- und Sicherheitshinweise

- -

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.

- -

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.

- -

Wenn Sie Inhalte haben, die für Benutzer von Gefahr sein können, sollten Sie eine Warnmeldung bereitstellen. Besser sicher sein als entschuldigung!

- -

WebXR Device API-Konzepte und -Nutzung

- -

WebXR: AR and VR

- -
-
Example WebXR hardware setup
-Sketch of a person in a chair with wearing goggles labelled "Head mounted display (HMD)" facing a monitor with a webcam labeled "Position sensor"
- -

While the older WebVR API 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.

- -

A typical XR device can have either 3 or 6 degrees of freedom and might or might not have an external positional sensor.

- -

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.

- -

WebXR application lifecycle

- -

Most applications using WebXR will follow a similar overall design pattern:

- -
    -
  1. Check to see if the user's device and browser are both capable of presenting the XR experience you want to provide. -
      -
    1. 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.
      2. -
    2. 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.inlineimmersive-vrimmersive-ar
      3. -
    3. If the session type you want to use is available, provide the appropriate interface to the user to allow them to activate it.
      4. -
    -
    2. -
  2. 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 .inlineimmersive-vrimmersive-ar
    3. -
  3. If the promise returned by  resolves, use the new {{domxref("XRSession")}} to run the frame loop for the entire duration of the WebXR experience.requestSession() -
      -
    1. Call the {{domxref("XRSession")}} method {{DOMxRef("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} to schedule the first frame render for the XR device.
      2. -
    2. Each  callback should use the information provided about the objects located in the 3D world to render the frame using WebGL.requestAnimationFrame()
      3. -
    3. Keep calling {{DOMxRef("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} from within the callback to schedule each successive frame to be rendered.
      4. -
    -
    4. -
  4. When the time comes, end the XR session; otherwise, continue the loop until the user chooses to exit XR mode. -
      -
    1. To end the XR session yourself, call {{DOMxRef("XRSession.end", "XRSession.end()")}}.
      2. -
    2. 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.
      3. -
    -
    5. -
- -

Permissions and security

- -

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.immersive-vr

- -

Immersive presentation of VR

- -

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  feature policy.immersive-vrxr-spatial-tracking

- -

Once that check is passed, the request to enter mode is allowed if all of the following are true:immersive-vr

- - - -

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.requestSession()SecurityError

- -

Inline presentation

- -

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 user intent.inline

- -

Specifically:

- - - -
-

Note: Additional requirements may be put into effect due to the specific features requested by the options object when calling .requestSession()

-
- -

User intent

- -

User intent 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: implicit and explicit.

- -

Explicit user intent (explicit user consent) is granted when the user has specifically and expressly been asked for permission to perform an action.

- -

Implicit user intent (implicit user consent) is assumed if either of the following scenarios is the case:

- - - -

WebXR availability

- -

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.

- -

WebXR polyfill

- -

The team designing the WebXR specification has published a WebXR polyfill which you can use to simulate WebXR on browsers which don't have support for the WebXR APIs. If the browser supports the older WebVR API, that is used. Otherwise, the polyfill falls back to an implementation which uses Google's Cardboard VR API.

- -

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.

- -

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.

- -

WebXR API Emulator extension

- -

The Mozilla WebXR team has created a WebXR API Emulator 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.

- -
Emulator usage
- -

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.

- -
-

Important: You should always test your code on actual AR and/or VR hardware before releasing or shipping a product! Emulated, simulated, or polyfilled environments are not an adequate substitute for actual testing on physical devices.

-
- -
Getting the extension
- -

Download the WebXR API Emulator for your supported browser below:

- - - -

The source code for the extension is also available on GitHub.

- -
Emulator issues and notes
- -

While this isn't the place for a full article about the extension, there are some specific things worth mentioning.

- -

Version 0.4.0 of the extension was announced on March 26, 2020. It introduced support for augmented reality (AR) through the WebXR AR Module, which has is approaching a stable state. Documentation for AR is forthcoming shortly here on MDN.

- -

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")}}.XR

- -

Accessing the WebXR API

- -

To gain access to the WebXR API within the context of a given window, use the {{domxref("navigator.xr")}} property.

- -
-
{{domxref("navigator.xr")}} {{ReadOnlyInline}}
-
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.null
-
- -

WebXR interfaces

- -
-
{{DOMxRef("XR")}}
-
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.XR
-
{{DOMxRef("XRFrame")}}
-
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.XRFrameXRFrameXRFrameXRFrame
-
{{DOMxRef("XRRenderState")}}
-
Provides a set of configurable properties which change how the imagery output by an  is composited.XRSession
-
{{DOMxRef("XRSession")}}
-
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.XRSession
-
{{DOMxRef("XRSpace")}}
-
XRSpace 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.XRSpace
-
{{DOMxRef("XRReferenceSpace")}}
-
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.XRReferenceSpace
-
{{DOMxRef("XRBoundedReferenceSpace")}}
-
XRBoundedReferenceSpace 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, y = 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.XRReferenceSpace
-
{{DOMxRef("XRView")}}
-
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.XRView
-
{{DOMxRef("XRViewport")}}
-
Describes a viewport. A viewport is a rectangular portion of a graphic surface.
-
{{DOMxRef("XRRigidTransform")}}
-
A transform defined using a position and orientation in the virtual space's coordinate system as described by the {{domxref("XRSpace")}}.
-
{{DOMxRef("XRPose")}}
-
Describes a position and orientation in space relative to an {{domxref("XRSpace")}}.
-
{{DOMxRef("XRViewerPose")}}
-
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.XRViewerPose
-
{{DOMxRef("XRInputSource")}}
-
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.XRInputSource
-
{{DOMxRef("XRWebGLLayer")}}
-
A layer which serves as a WebGL frame buffer into which a scene's view is rendered. Using WebGL to render the scene gains substantial performance benefits due to graphics acceleration.
-
- -

Event interfaces

- -

The following interfaces are used to represent the events used by the WebXR API.

- -
-
{{domxref("XRInputSourceEvent")}}
-
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.
-
{{domxref("XRInputSourcesChangeEvent")}}
-
Sent to indicate that the set of available input sources has changed for the {{domxref("XRSession")}}.
-
{{domxref("XRReferenceSpaceEvent")}}
-
Sent when the state of an {{domxref("XRReferenceSpace")}} changes.
-
{{domxref("XRSessionEvent")}}
-
Sent to indicate that the state of an {{domxref("XRSession")}} has changed. For example, if the position and/or orient
-
- -

Extensions to the WebGL API

- -

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.

- -
-
{{domxref("WebGLRenderingContextBase.makeXRCompatibile()")}}
-
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.truemakeXRCompatible()
-
- -

Guides and tutorials

- -

The following guides and tutorials are a great resource to learn how to comprehend WebXR and the underlying 3D and VR/AR graphics concepts.

- -
-
Fundamentals of WebXR
-
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.
-
Matrix math for the web
-
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.
-
Setting up and shutting down a WebXR session
-
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.
-
Permissions and security for WebXR
-
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.
-
Geometry and reference spaces in WebXR
-
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.
-
Spatial tracking in WebXR
-
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.
-
Rendering and the WebXR frame loop
-
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.
-
Viewpoints and viewers: Simulating cameras in WebXR
-
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.
-
Movement, orientation, and motion: A WebXR example
-
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.
-
Using bounded reference spaces
-
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.bounded-floorbounded-floor
-
WebXR performance guide
-
Recommendations and tips to help you optimize the performance of your WebXR application.
-
Inputs and input sources
-
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.
-
Using WebXR input profiles
-
A guide to interpreting the {{Glossary("JSON")}} data provided by the WebXR Input Profiles Registry, which can be used to determine what options and controls are available on the user's available input devices.
-
Supporting advanced controllers and gamepads in WebXR applications
-
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.
-
- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("WebXR")}}{{Spec2("WebXR")}}Initial definition.
- -

Browser compatibility

- -

{{Compat("api.Navigator.xr")}}

- -

See also

- - 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' ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

Das ::placeholder CSS Pseudo-Element stellt den Platzhaltertext eines Formular-Elements dar.

- -
::placeholder {
-  color: blue;
-  font-size: 1.5em;
-}
- -

Only the subset of CSS properties that apply to the {{cssxref("::first-line")}} pseudo-element can be used in a rule using ::placeholder in its selector.

- -
-

Note: In Firefox, the appearance of placeholder text is a translucent gray color by default.

-
- -

Syntax

- -{{csssyntax}} - -

Beispiele

- -

Red text

- -

HTML

- -
<input placeholder="Type something here!">
- -

CSS

- -
input::placeholder {
-  color: red;
-  font-size: 1.2em;
-  font-style: italic;
-}
- -

Ergebnis

- -

{{EmbedLiveSample("Red_text", 200, 60)}}

- -

Green text

- -

HTML

- -
<input placeholder="Type something here...">
- -

CSS

- -
input::placeholder {
-  color: green;
-}
-
- -

Ergebnis

- -

{{EmbedLiveSample("Green_text", 200, 60)}}

- -

Accessibility concerns

- -

Color contrast

- -

Contrast Ratio

- -

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.

- -

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.

- -

Color contrast ratio is determined by comparing the luminosity of the placeholder text and the input background color values. In order to meet current Web Content Accessibility Guidelines (WCAG), 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.

- - - -

Usability

- -

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.

- -

An alternate approach to providing placeholder information is to include it outside of the input in close visual proximity, then use aria-describedby to programmatically associate the {{HTMLElement("input")}} with its hint.

- -

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 aria-describedby 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.

- -
<label for="user-email">Your email address</label>
-<span id="user-email-hint" class="input-hint">Example: jane@sample.com</span>
-<input id="user-email" aria-describedby="user-email-hint" name="email" type="email">
-
- - - -

Windows High Contrast Mode

- -

Placeholder text will appear with the same styling as user-entered text content when rendered in Windows High Contrast Mode. This will make it difficult for some people to determine which content has been entered, and which content is placeholder text.

- - - -

Labels

- -

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.

- - - -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS4 Pseudo-Elements', '#placeholder-pseudo', '::placeholder')}}{{Spec2('CSS4 Pseudo-Elements')}}Initial definition.
- -

Browser compatibility

- -
- - -

{{Compat("css.selectors.placeholder")}}

-
- -

Siehe auch

- - 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 ---- -

{{CSSRef}}{{SeeCompatTable}}

- -

Summary

- -

The box-decoration-break 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.

- -

{{cssinfo}}

- -

Syntax

- -
box-decoration-break: slice;
-box-decoration-break: clone;
-
-box-decoration-break: initial;
-box-decoration-break: inherit;
-box-decoration-break: unset;
-
- -

Values

- -
-
slice
-
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.
-
clone
-
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") }}: no-repeat may be repeated multiple times.
-
- -

Formal syntax

- -{{csssyntax}} - -

Examples

- -

Inline box fragments

- -

An inline element that contains line-breaks styled with:

- -
.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;
-}
-
-...
-<span class="example">The<br>quick<br>orange fox</span>
- -

Results in:

- -

A screenshot of the rendering of an inline element styled with box-decoration-break:slice and styles given in the example.

- -

Adding box-decoration-break:clone to the above styles:

- -
  -webkit-box-decoration-break: clone;
-  -o-box-decoration-break: clone;
-  box-decoration-break: clone;
-
- -

Results in:

- -

A screenshot of the rendering of an inline element styled with box-decoration-break:clone and styles given in the example

- -

You can try the two inline examples above in your browser.

- -

Here's an example of an inline element using a large border-radius value. The second "iM" has a line-break between the "i" and the "M". For comparison, the first "iM" 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.

- -

A screenshot of the rendering of the second inline element example.

- -

Try the above example in your browser.

- -

Block box fragments

- -

A block element with similar styles as above, first without any fragmentation:

- -

A screenshot of the rendering of the block element used in the examples without any fragmentation.

- -

Fragmenting the above block into three columns results in:

- -

A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:slice.

- -

Note that stacking these pieces vertically will result in the non-fragmented rendering.

- -

Now the same example styled with box-decoration-break:clone

- -

A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:clone.

- -

Note here that each fragment has an identical replicated border, box-shadow and background.

- -

You can try the block examples above in your browser.

- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('CSS3 Fragmentation', '#break-decoration', 'box-decoration-break') }}{{ Spec2('CSS3 Fragmentation') }}Initial definition
- -

Browser compatibility

- -{{Compat("css.properties.box-decoration-break")}} - -

See also

- - 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 ---- -
{{cssref}}
- -

The size and position of an element are often impacted by its containing block. Most often, the containing block is the content area of an element's nearest block-level ancestor, but this is not always the case. In this article, we examine the factors that determine an element's containing block.

- -

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:

- -
    -
  1. Content area
    2. -
  2. Padding area
    3. -
  3. Border area
    4. -
  4. Margin area
    5. -
- -

Diagram of the box model

- -

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.

- -

Effects of the containing block

- -

Before learning what determines the containing block of an element, it's useful to know why it matters in the first place.

- -

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 absolute or fixed) are computed from the element's containing block.

- -

Identifying the containing block

- -

The process for identifying the containing block depends entirely on the value of the element's {{cssxref("position")}} property:

- -
    -
  1. If the position property is static, relative, or sticky, the containing block is formed by the edge of the content box of the nearest ancestor element that is either a block container (such as an inline-block, block, or list-item element) or establishes a formatting context (such as a table container, flex container, grid container, or the block container itself).
    2. -
  2. If the position property is absolute, the containing block is formed by the edge of the padding box of the nearest ancestor element that has a position value other than static (fixed, absolute, relative, or sticky).
    3. -
  3. If the position property is fixed, 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).
    4. -
  4. If the position property is absolute or fixed, the containing block may also be formed by the edge of the padding box of the nearest ancestor element that has the following: -
      -
    1. A {{cssxref("transform")}} or {{cssxref("perspective")}} value other than none
      2. -
    2. A {{cssxref("will-change")}} value of transform or perspective
      3. -
    3. A {{cssxref("filter")}} value other than none or a will-change value of filter (only works on Firefox).
      4. -
    4. A {{cssxref("contain")}} value of paint (e.g. contain: paint;)
      5. -
    -
    5. -
- -
-

Note: The containing block in which the root element ({{HTMLElement("html")}}) resides is a rectangle called the initial containing block. It has the dimensions of the viewport (for continuous media) or the page area (for paged media).

-
- -

Calculating percentage values from the containing block

- -

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 box model properties and offset properties:

- -
    -
  1. The {{cssxref("height")}}, {{cssxref("top")}}, and {{cssxref("bottom")}} properties compute percentage values from the height of the containing block.
    2. -
  2. The {{cssxref("width")}}, {{cssxref("left")}}, {{cssxref("right")}}, {{cssxref("padding")}}, and {{cssxref("margin")}} properties compute percentage values from the width of the containing block.
    3. -
- -

Some examples

- -

The HTML code for all our examples is:

- -
<body>
-  <section>
-    <p>This is a paragraph!</p>
-  </section>
-</body>
-
- -

Only the CSS is altered in each instance below.

- -

Example 1

- -

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.

- - - -
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;
-}
-
- -

{{EmbedLiveSample('Example_1','100%','300')}}

- -

Example 2

- -

In this example, the paragraph's containing block is the {{HTMLElement("body")}} element, because <section> is not a block container (because of display: inline) and doesn’t establish a formatting context.

- - - -
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;
-}
-
- -

{{EmbedLiveSample('Example_2','100%','300')}}

- -

Example 3

- -

In this example, the paragraph's containing block is <section> because the latter's position is absolute. The paragraph's percentage values are affected by the padding of its containing block, though if the containing block's {{cssxref("box-sizing")}} value were border-box this would not be the case.

- - - -
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;
-}
-
- -

{{EmbedLiveSample('Example_3','100%','300')}}

- -

Example 4

- -

In this example, the paragraph's position is fixed, 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.

- - - -
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;
-}
-
- -

{{EmbedLiveSample('Example_4','100%','300')}}

- -

Example 5

- -

In this example, the paragraph's position is absolute, so its containing block is <section>, which is the nearest ancestor with a {{cssxref("transform")}} property that isn't none.

- - - -
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;
-}
-
- -

{{EmbedLiveSample('Example_5','100%','300')}}

- -

See also

- - 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 ---- -
{{CSSRef}}
- -

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. Below is an overview of most of these data types. Refer to the page for each value type for more detailed information.

- -

Textual data types

- - - -

Text data types are either <string>, a quoted series of characters, or an <ident>, a "CSS Identifier" which is an unquoted string. A <string> must be quoted with either single or double quotes. CSS Identifiers, listed in the specifications as <ident> or <custom-ident>, must be unquoted.

- -

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("<custom-ident>")}}, {{cssxref("<string>")}}, or both.

- -

When both quoted and unquoted user defined text values are permitted, the specification will list <custom-ident> | <string>, meaning quotes are optional, such as is the case with animation names:

- -
@keyframe validIdent {
-  /* keyframes go here */
-}
-@keyframe 'validString' {
-  /* keyframes go here */
-}
- -

Some text values are not valid if encompassed in quotes. For example, the value of {{cssxref("grid-area")}} can be a <custom-ident>, so if we had a grid area named content we would use it without quotes:

- -
.item {
-  grid-area: content;
-}
-
- -

In comparison, a data type that is a {{cssxref("<string>")}}, such as a string value of the {{cssxref("content")}} property, must be quoted:

- -
.item::after {
-    content: "This is my content.";
-}
-
- -

While you can generally create any name you want, including using emojis, the identifier can't be none, unset, initial, or inherit, 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("<custom-ident>")}} and {{cssxref("<string>")}} reference pages for more details.

- -

Pre-defined keyword values

- -

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.

- -

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")}}.

- -
left | right | none | inline-start | inline-end
- -

Such values are used without quotes:

- -
.box {
-    float: left;
-}
-
- -

CSS-wide values

- -

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.

- -

The initial keyword represents the value specified as the property’s initial value. The inherit keyword represents the computed value of the property on the element’s parent, provided it is inherited.

- -

The unset keyword acts as either inherit or initial, depending on whether the property is inherited or not.

- -

A fourth value of {{cssxref("revert")}} was added in the Cascade Level 4 specification, but it does not currently have good browser support.

- -

URLs

- -

A {{cssxref("<url>")}} type uses functional notation, which accepts a <string> 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.

- -
.box {
-  background-image: url("images/my-background.png");
-}
-
-.box {
-  background-image: url("https://www.exammple.com/images/my-background.png");
-}
-
- -

The parameter for url() can be either quoted or unquoted. If unquoted, it is parsed as a <url-token>, which has extra requirements including the escaping of certain characters. See {{cssxref("<url>")}}  for more information.

- -

Numeric data types

- - - -

Integers

- -

An integer is one or more decimal digits, 0 through 9, such as 1024 or -55. An integer may be preceded by a + or - symbol, with no space between the symbol and the integer.

- -

Numbers

- -

A {{cssxref("<number>")}} represents a real number, which may or may not have a decimal point with a fractional component, for example 0.255, 128 or -1.2. Numbers may also be preceded by a + or - symbol.

- -

Dimensions

- -

A {{cssxref("<dimension>")}} is a <number> with a unit attached to it, for example 45deg, 100ms, or 10px. 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. 1 cm is not valid.

- -

CSS uses dimensions to specify:

- - - -

These are all covered in subsections below.

- -

Distance units

- -

Where a distance unit, also known as a length, is allowed as a value for a property, this is described as the {{cssxref("<length>")}} type. There are two types of lengths in CSS: relative and absolute.

- -

Relative length units specify a length in relation to something else. For example, em is relative to the font size on the element and vh is relative to the viewport height.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Relative length units

-
UnitRelative to
emFont size of the element.
exx-height of the element's font.
capCap height (the nominal height of capital letters) of the element's font.
chAverage character advance of a narrow glyph in the element’s font, as represented by the “0” (ZERO, U+0030) glyph.
icAverage character advance of a full width glyph in the element’s font, as represented by the “水” (CJK water ideograph, U+6C34) glyph.
remFont size of the root element.
lhLine height of the element.
rlhLine height of the root element.
vw1% of viewport's width.
vh1% of viewport's height.
vi1% of viewport's size in the root element's inline axis.
vb1% of viewport's size in the root element's block axis.
vmin1% of viewport's smaller dimension.
vmax1% of viewport's larger dimension.
- -

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, mm is a physical millimeter, 1/10th of a centimeter.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Absolute length units

-
UnitNameEquivalent to
cmCentimeters1cm = 96px/2.54
mmMillimeters1mm = 1/10th of 1cm
QQuarter-millimeters1Q = 1/40th of 1cm
inInches1in = 2.54cm = 96px
pcPicas1pc = 1/16th of 1in
ptPoints1pt = 1/72th of 1in
pxPixels1px = 1/96th of 1in
- -

When including a length value, if the length is 0, 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.

- -

Angle units

- -

Angle values are represented by the type {{cssxref("<angle>")}} and accept the following values:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
UnitNameDescription
degDegreesThere are 360 degrees in a full circle.
gradGradiansThere are 400 gradians in a full circle.
radRadiansThere are 2π radians in a full circle.
turnTurnsThere is 1 turn in a full circle.
- -

Time units

- -

Time values are represented by the type {{cssxref("<time>")}}. When including a time value, the unit identifier -- the s or ms -- is required. It accepts the following values.

- - - - - - - - - - - - - - - - - - - - - -
UnitNameDescription
sSeconds
msMillisecondsThere are 1,000 milliseconds in a second.
- -

Frequency units

- -

Frequency values are represented by the type {{cssxref("<frequency>")}}. It accepts the following values.

- - - - - - - - - - - - - - - - - - - - - -
UnitNameDescription
HzHertzRepresents the number of occurrences per second.
kHzKiloHertzA kiloHertz is 1000 Hertz.
- -

1Hz, which can also be written as 1hz or 1HZ, is one cycle per second.

- -

Resolution unit

- -

Resolution units are represented by the type {{cssxref("<resolution>")}}. 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:

- - - - - - - - - - - - - - - - - - - - - - -
UnitDescription
dpiDots per inch.
dpcmDots per centimetre.
dppx, xDots per px unit.
- -

Percentages

- -

A {{cssxref("<percentage>")}} is a type that represents a fraction of some other value.

- -

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.

- -

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:

- -
.box {
-  width: 50%;
-}
- -

Mixing percentages and dimensions

- -

Some properties accept a dimension that could be either one of two types, for example a <length> or a <percentage>. In this case the allowed value is detailed in the specification as a combination unit, e.g. {{cssxref("<length-percentage>")}}. Other possible combinations are as follows:

- - - -

Special data types (defined in other specs)

- - - -

Color

- -

The {{cssxref("<color>")}} value specifies the color of an element feature (e.g. it's background color), and is defined in the CSS Color Module.

- -

Image

- -

The {{cssxref("<image>")}} value specifies all the different types of image that can be used in CSS, and is defined in the CSS Image Values and Replaced Content Module.

- -

Position

- -

The {{cssxref("<position>")}} 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 CSS Backgrounds and Borders specification.

- -

Functional notation

- - - -

Functional notation 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 ( followed by the argument(s) to the notation followed by a right parenthesis ). Functions can take multiple arguments, which are formatted similarly to a CSS property value.

- -

White space is allowed, but optional inside the parentheses. (But see notes regarding whitespace within pages for min(), max() and clamp() functions.)

- -

Some legacy functional notations such as rgba() 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.

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("CSS4 Values")}}{{Spec2("CSS4 Values")}}Adds the vi, vb, ic, cap, lh and rlh units.
- Adds the min(), max() and clamp() functional notation
- Adds toggle()
{{SpecName("CSS3 Values")}}{{Spec2("CSS3 Values")}}Adds calc(), ch, rem, vw, vw, vmin, vmax, Q
{{SpecName("CSS4 Colors")}}{{Spec2("CSS4 Colors")}}Adds commaless syntaxes for the rgb(), rgba(), hsl(), and hsla() functions. Allows alpha values in rgb() and hsl(), turning rgba() and hsla() into (deprecated) aliases for them.
- Adds color keyword rebeccapurple.
- Adds 4- and 8-digit hex color values, where the last digit(s) represents the alpha value.
- Adds hwb(), device-cmyk(), and color() functions.
{{SpecName("CSS3 Colors")}}{{Spec2("CSS3 Colors")}}Deprecates system-colors. Adds SVG colors. Adds the rgba(), hsl(), and hsla() functions.
{{SpecName("CSS4 Images")}}{{Spec2("CSS4 Images")}} -

Adds element(), image(), image-set(), conic-gradient()

-
{{SpecName("CSS3 Images")}}{{Spec2("CSS3 Images")}}Initial definition of image.
{{SpecName("CSS2.1")}}{{Spec2("CSS2.1")}}
{{SpecName("CSS1")}}{{Spec2("CSS1")}}Initial definition.
- -

See also

- - 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 ---- -
{{cssref}}
- -

The {{Glossary("DOM")}} provides features that can test the results of a media query programmatically, via the {{domxref("MediaQueryList")}} interface and its methods and properties. Once you've created a MediaQueryList object, you can check the result of the query or receive notifications when the result changes.

- -

Creating a media query list

- -

Before you can evaluate the results of a media query, you need to create the MediaQueryList object representing the query. To do this, use the {{domxref("window.matchMedia")}} method.

- -

For example, to set up a query list that determines if the device is in landscape or portrait orientation:

- -
const mediaQueryList = window.matchMedia("(orientation: portrait)");
-
- -

Checking the result of a query

- -

Once you've created your media query list, you can check the result of the query by looking at the value of its matches property:

- -
if (mediaQueryList.matches) {
-  /* The viewport is currently in portrait orientation */
-} else {
-  /* The viewport is not currently in portrait orientation, therefore landscape */
-}
-
- -

Receiving query notifications

- -

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 listener than to poll the query's result. To do this, call the addListener() 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 true to false):

- -
// 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);
-
- -

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.

- -

The handleOrientationChange() function would look at the result of the query and handle whatever we need to do on an orientation change:

- -
function handleOrientationChange(evt) {
-  if (evt.matches) {
-    /* The viewport is currently in portrait orientation */
-  } else {
-    /* The viewport is currently in landscape orientation */
-  }
-}
-
- -

Above, we define the parameter as evt — an event object. This makes sense because newer implementations of MediaQueryList handle event listeners in a standard way. They no longer use the unusual {{domxref("MediaQueryListListener")}} mechanism, but a standard event listener setup, passing an event object of type {{domxref("MediaQueryListEvent")}} as the argument to the callback function.

- -

This event object also includes the {{domxref("MediaQueryListEvent.media","media")}} and {{domxref("MediaQueryListEvent.matches","matches")}} properties, so you can query these features of the MediaQueryList by directly accessing it, or accessing the event object.

- -

Ending query notifications

- -

To stop receiving notifications about changes to the value of your media query, call removeListener() on the MediaQueryList, passing it the name of the previously-defined callback function:

- -
mediaQueryList.removeListener(handleOrientationChange);
-
- -

Browser compatibility

- -

MediaQueryList interface

- - - -

{{Compat("api.MediaQueryList")}}

- -

See also

- - 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 ---- -
{{cssref}}
- -

A media query 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 CSS3, let the presentation of content be tailored to a specific range of output devices without having to change the content itself.

- -

Syntax

- -

Media queries consist of a media type 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 and all expressions in the media query are true.

- -
<!-- CSS media query on a link element -->
-<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
-
-<!-- CSS media query within a stylesheet -->
-<style>
-@media (max-width: 600px) {
-  .facet_sidebar {
-    display: none;
-  }
-}
-</style>
- -

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 <link> tags will still download even if their media queries would return false (they will not apply, however).

- -

Unless you use the not or only operators, the media type is optional and the all type will be implied.

- -

Logical operators

- -

You can compose complex media queries using logical operators, including not, and, and only. The and operator is used for combining multiple media features together into a single media query, requiring each chained feature to return true in order for the query to be true. The not operator is used to negate an entire media query. The only 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 not or only operators, you must specify an explicit media type.

- -

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 or operator.

- -

and

- -

The and 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 all media type, could look like this:

- -
@media (min-width: 700px) { ... }
- -

If, however, you wanted this to apply only if the display is in landscape, you could use an and operator to chain the media features together.

- -
@media (min-width: 700px) and (orientation: landscape) { ... }
- -

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 and operator.

- -
@media tv and (min-width: 700px) and (orientation: landscape) { ...  }
- -

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.

- -

comma-separated lists

- -

Comma-separated lists behave like the logical operator or 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.

- -

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:

- -
@media (min-width: 700px), handheld and (orientation: landscape) { ... }
- -

Above, if I were on a screen device with a viewport width of 800px, the media statement would return true because the first part, interpreted as @media all and (min-width: 700px) would apply to my device and therefore return true, despite the fact that my screen device would fail the handheld media type check in the second media query. Likewise, if I were on a handheld 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.

- -

not

- -

The not keyword applies to the whole media query and returns true if the media query would otherwise return false (such as monochrome on a color display or a screen width of 600px with a min-width: 700px feature query). A not 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 not keyword cannot be used to negate an individual feature query, only an entire media query. For example, the not is evaluated last in the following query:

- -
@media not all and (monochrome) { ... }
-
- -

This means that the query is evaluated like this:

- -
@media not (all and (monochrome)) { ... }
-
- -

... rather than like this:

- -
@media (not all) and (monochrome) { ... }
- -

As another example, look at the following media query:

- -
@media not screen and (color), print and (color)
-
- -

It is evaluated like this:

- -
@media (not (screen and (color))), print and (color)
- -

only

- -

The only keyword prevents older browsers that do not support media queries with media features from applying the given styles:

- -
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
-
- -

Pseudo-BNF (for those of you that like that kind of thing)

- -
media_query_list: <media_query> [, <media_query> ]*
-media_query: [[only | not]? <media_type> [ and <expression> ]*]
-  | <expression> [ and <expression> ]*
-expression: ( <media_feature> [: <value>]? )
-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
- -

Media queries are case insensitive.  Media queries involving unknown media types are always false.

- -
Note: Parentheses are required around expressions; failing to use them is an error.
- -

Media features

- -

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 "<" and ">" 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.

- -
Note: 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.
- -

color

- -

Value: {{cssxref("<color>")}}
- Media: {{cssxref("Medien/Visuell")}}
- Accepts min/max prefixes: yes

- -

Indicates the number of bits per color component of the output device.  If the device is not a color device, this value is zero.

- -
Note: 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.
- -

Examples

- -

To apply a style sheet to all color devices:

- -
@media all and (color) { ... }
-
- -

To apply a style sheet to devices with at least 4 bits per color component:

- -
@media all and (min-color: 4) { ... }
-
- -

color-index

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Medien/Visuell")}}
- Accepts min/max prefixes: yes

- -

Indicates the number of entries in the color look-up table for the output device.

- -

Examples

- -

To indicate that a style sheet should apply to all devices using indexed color, you can do:

- -
@media all and (color-index) { ... }
-
- -

To apply a style sheet to indexed color devices with at least 256 colors:

- -
<link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" />
-
- -

aspect-ratio

- -

Value: {{cssxref("<ratio>")}}
- Media: {{cssxref("Medien/Visuell")}}, {{cssxref("Medien/Taktil")}}
- Accepts min/max prefixes: yes

- -

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).

- -

Example

- -

The following selects a special style sheet to use for when the display area is at least as wide as it is high.

- -
@media screen and (min-aspect-ratio: 1/1) { ... }
- -

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.

- -

device-aspect-ratio

- -

Value: {{cssxref("<ratio>")}}
- Media: {{cssxref("Medien/Visuell")}}, {{cssxref("Medien/Taktil")}}
- Accepts min/max prefixes: yes

- -

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).

- -

Example

- -

The following selects a special style sheet to use for widescreen displays.

- -
@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }
- -

This selects the style when the aspect ratio is either 16:9 or 16:10.

- -

device-height

- -

Value: {{cssxref("<length>")}}
- Media: {{cssxref("Medien/Visuell")}}, {{cssxref("Medien/Taktil")}}
- Accepts min/max prefixes: yes

- -

Describes the height of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).

- -

Example

- -

To apply a style sheet to a document when displayed on a screen that is less than 800 pixels long, you can use this:

- -
<link rel="stylesheet" media="screen and (max-device-height: 799px)" />
-
- -

device-width

- -

Value: {{cssxref("<length>")}}
- Media: {{cssxref("Medien/Visuell")}}, {{cssxref("Medien/Taktil")}}
- Accepts min/max prefixes: yes

- -

Describes the width of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).

- -

Example

- -

To apply a style sheet to a document when displayed on a screen that is less than 800 pixels wide, you can use this:

- -
<link rel="stylesheet" media="screen and (max-device-width: 799px)" />
- -

grid

- -

Value: <mq-boolean> which is an {{cssxref("<integer>")}} that can only have the 0 and 1 value.
- Media: all
- Accepts min/max prefixes: no

- -

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.

- -

Example

- -

To apply a style to handheld devices with a 15-character or narrower display:

- -
@media handheld and (grid) and (max-width: 15em) { ... }
-
- -
Note: 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.
- -

height

- -

Value: {{cssxref("<length>")}}
- Media: {{cssxref("Medien/Visuell")}}, {{cssxref("Medien/Taktil")}}
- Accepts min/max prefixes: yes

- -

The height 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).

- -
Note: As the user resizes the window, Firefox switches style sheets as appropriate based on media queries using the width and height media features.
- -

monochrome

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Medien/Visuell")}}
- Accepts min/max prefixes: yes

- -

Indicates the number of bits per pixel on a monochrome (greyscale) device.  If the device isn't monochrome, the device's value is 0.

- -

Examples

- -

To apply a style sheet to all monochrome devices:

- -
@media all and (monochrome) { ... }
-
- -

To apply a style sheet to monochrome devices with at least 8 bits per pixel:

- -
@media all and (min-monochrome: 8) { ... }
-
- -

orientation

- -

Value: landscape | portrait
- Media: {{cssxref("Medien/Visuell")}}
- Accepts min/max prefixes: no

- -

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.

- -

Example

- -

To apply a style sheet only in portrait orientation:

- -
@media all and (orientation: portrait) { ... }
- -
Note: 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.
- -

resolution

- -

Value: {{cssxref("<resolution>")}}
- Media: {{cssxref("Media/Bitmap", "bitmap")}}
- Accepts min/max prefixes: yes

- -

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).

- -

Example

- -

To apply a style sheet to devices with at least 300 dots per inch of resolution:

- -
@media print and (min-resolution: 300dpi) { ... }
-
- -

To replace the old (min-device-pixel-ratio: 2) syntax:

- -
@media screen and (min-resolution: 2dppx) { ... }
- -

scan

- -

Value: progressive | interlace
- Media: {{cssxref("Medien/TV")}}
- Accepts min/max prefixes: no

- -

Describes the scanning process of television output devices.

- -

Example

- -

To apply a style sheet only to progressive scanning televisions:

- -
@media tv and (scan: progressive) { ... }
-
- -

width

- -

Value: {{cssxref("<length>")}}
- Media: {{cssxref("Medien/Visuell")}}, {{cssxref("Medien/Taktil")}}
- Accepts min/max prefixes: yes

- -

The width 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).

- -
Note: As the user resizes the window, Firefox switches style sheets as appropriate based on media queries using the width and height media features.
- -

Examples

- -

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:

- -
@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }
-
- -

This media query specifies a style sheet that applies to printed media wider than 8.5 inches:

- -
<link rel="stylesheet" media="print and (min-width: 8.5in)"
-    href="http://foo.com/mystyle.css" />
-
- -

This query specifies a style sheet that is usable when the viewport is between 500 and 800 pixels wide:

- -
@media screen and (min-width: 500px) and (max-width: 800px) { ... }
-
- -

Mozilla-specific media features

- -

Mozilla offers several Gecko-specific media features. Some of these may be proposed as official media features.

- -

{{ h3_gecko_minversion("-moz-images-in-menus", "1.9.2") }}

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Medien/Visuell")}}
- Accepts min/max prefixes: no

- -

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 pseudo-class.

- -

{{ h3_gecko_minversion("-moz-mac-graphite-theme", "1.9.2") }}

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Medien/Visuell")}}
- Accepts min/max prefixes: no

- -

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.

- -

This corresponds to the {{ cssxref(":-moz-system-metric(mac-graphite-theme)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-maemo-classic", "1.9.2") }}

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Medien/Visuell")}}
- Accepts min/max prefixes: no

- -

If the user is using Maemo with the original theme, this is 1; if it's using the newer Fremantle theme, this is 0.

- -

This corresponds to the {{ cssxref(":-moz-system-metric(maemo-classic)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-device-pixel-ratio", "2.0") }} {{ deprecated_inline("gecko&16") }}

- -

Value: {{cssxref("<number>")}}
- Media: {{cssxref("Medien/Visuell")}}
- Accepts min/max prefixes: yes

- -

Gives the number of device pixels per CSS pixel.

- -
-

Do not use this feature.

- -

Use the resolution feature with the dppx unit instead.
-
- -moz-device-pixel-ratio may be used for compatibility with Firefox older than 16 and -webkit-device-pixel-ratio with WebKit-based browsers that do not support dppx.

- -

Example:

- -
@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 */
- -

See this CSSWG article for compatibility good practices regarding resolution and dppx.

-
- -
Note: This media feature is also implemented by Webkit and by IE 11 for Windows Phone 8.1 as -webkit-device-pixel-ratio. The min and max prefixes as implemented by Gecko are named min--moz-device-pixel-ratio and max--moz-device-pixel-ratio; but the same prefixes as implemented by Webkit are named -webkit-min-device-pixel-ratio and -webkit-max-device-pixel-ratio.
- -

{{ h3_gecko_minversion("-moz-os-version", "25.0") }}

- -

Value: windows-xp | windows-vista | windows-win7 | windows-win8 | windows-win10
- Media: {{cssxref("Medien/Visuell")}}
- Accepts min/max prefixes: no

- -

Indicates which operating system version is currently being used. Currently only implemented on Windows. Possible values are:

- - - -

This is provided for application skins and other chrome code to be able to adapt to work well with the current operating system version.

- -

{{ h3_gecko_minversion("-moz-scrollbar-end-backward", "1.9.2") }}

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Medien/Visuell")}}
- Accepts min/max prefixes: no

- -

If the device's user interface displays a backward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.

- -

This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-scrollbar-end-forward", "1.9.2") }}

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Medien/Visuell")}}
- Accepts min/max prefixes: no

- -

If the device's user interface displays a forward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.

- -

This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-scrollbar-start-backward", "1.9.2") }}

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Medien/Visuell")}}
- Accepts min/max prefixes: no

- -

If the device's user interface displays a backward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.

- -

This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-scrollbar-start-forward", "1.9.2") }}

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Medien/Visuell")}}
- Accepts min/max prefixes: no

- -

If the device's user interface displays a forward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.

- -

This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-scrollbar-thumb-proportional", "1.9.2") }}

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Medien/Visuell")}}
- Accepts min/max prefixes: no

- -

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.

- -

This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-touch-enabled", "1.9.2") }}

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Medien/Visuell")}}
- Accepts min/max prefixes: no

- -

If the device supports touch events (for a touch screen), this is 1. Otherwise it's 0.

- -

This corresponds to the {{ cssxref(":-moz-system-metric(touch-enabled)") }} CSS pseudo-class.

- -

Example

- -

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.

- -

{{ h3_gecko_minversion("-moz-windows-classic", "1.9.2") }}

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Medien/Visuell")}}
- Accepts min/max prefixes: no

- -

If the user is using Windows unthemed (in classic mode instead of using uxtheme), this is 1; otherwise it's 0.

- -

This corresponds to the {{ cssxref(":-moz-system-metric(windows-classic)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-windows-compositor", "1.9.2") }}

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Medien/Visuell")}}
- Accepts min/max prefixes: no

- -

If the user is using Windows with the DWM compositor, this is 1; otherwise it's 0.

- -

This corresponds to the {{ cssxref(":-moz-system-metric(windows-compositor)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-windows-default-theme", "1.9.2") }}

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Medien/Visuell")}}
- Accepts min/max prefixes: no

- -

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.

- -

This corresponds to the {{ cssxref(":-moz-system-metric(windows-default-theme)") }} CSS pseudo-class.

- -

{{ h3_gecko_minversion("-moz-windows-glass", "21.0") }}

- -

Value: {{cssxref("<integer>")}}
- Media: {{cssxref("Medien/Visuell")}}
- Accepts min/max prefixes: no

- -

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.

- -

{{ h3_gecko_minversion("-moz-windows-theme", "2.0") }}

- -

Value: aero | luna-blue | luna-olive | luna-silver | royale | generic | zune
- Media: {{cssxref("Medien/Visuell")}}
- Accepts min/max prefixes: no

- -

Indicates which Windows theme is currently being used. Only available on Windows. Possible values are:

- - - -

This is provided for application skins and other chrome code to be able to adapt to work well with the current Windows theme.

- -

Browser compatibility

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatChrome("21") }}{{ CompatGeckoDesktop("1.9.1") }}{{ CompatIE("9.0") }}{{ CompatOpera("9") }}{{ CompatSafari("4") }}
grid{{ CompatUnknown() }}{{ CompatNo() }} [1]{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
resolution{{ CompatChrome("29") }}{{ CompatGeckoDesktop("1.9.1") }} [2]
- {{ CompatGeckoDesktop("8.0") }} [3]		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
scan{{ CompatUnknown() }}{{ CompatNo() }} [4]{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -

[1] grid media type is not supported

- -

[2] Supports {{cssxref("<integer>")}} values;

- -

[3] Supports {{cssxref("<number>")}} values, as per the spec.

- -

[4] tv media type is not supported

- -

See also

- - 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 ---- -

Media Queries can also be used to help users with disabilities understand your website better.

- -

Reduced Motion

- -

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.

- -

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.

- -

Syntax

- -
-
no-preference
-
Indicates that the user has made no preference known to the system.
-
reduce
-
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.
-
- -

Example

- -

This example has an annoying animation unless you turn on Reduce Motion in your accessibility preferences.

- -

HTML

- -
<div class="animation">animated box</div>
-
- -

CSS

- -
.animation {
-  -webkit-animation: vibrate 0.3s linear infinite both;
-  animation: vibrate 0.3s linear infinite both;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .animation {
-    animation: none;
-  }
-}
-
- -

High Contrast Mode

- -
{{CSSRef}}{{Non-standard_header}}
- -

The -ms-high-contrast CSS media feature is a Microsoft extension that describes whether the application is being displayed in high contrast mode, and with what color variation.

- -

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.

- -

Syntax

- -

The -ms-high-contrast media feature is specified as one of the following values.

- -

Values

- -
-
active
-
-

Indicates that the subsequent styling rules will be applied when the system is placed in high contrast mode with any color variation.

-
-
black-on-white
-
-

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.

-
-
white-on-black
-
-

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.

-
-
- -

Example

- -

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.

- -
@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'); }
-}
-
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 ---- -
{{CSSRef}}
- -

Die Eigenschaft object-position bestimmt  die Ausrichtung des Elements in seiner Box.

- -
/* <position> Werte */
-object-position: 100px 50px;
-
-/* Globale Werte */
-object-position: inherit;
-object-position: initial;
-object-position: unset;
-
- -

{{cssinfo}}

- -

Syntax

- -

Values

- -
-
<position>
-
Is a {{ cssxref("<position>") }}, 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.
-
- -

Formal syntax

- -{{csssyntax}} - -

Example

- -

HTML content

- -
<img id="object-position-1" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/>
-<img id="object-position-2" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/>
-
- -

CSS content

- -
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%;
-}
-
- -

Output

- -

{{ EmbedLiveSample('Example', '100%','300px') }}

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS4 Images', '#the-object-position', 'object-position')}}{{Spec2('CSS4 Images')}}The from-image and flip keywords have been added.
{{SpecName('CSS3 Images', '#the-object-position', 'object-position')}}{{Spec2('CSS3 Images')}}Initial definition
- -

Browser compatibility

- -

{{ CompatibilityTable }}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support31.0{{ CompatGeckoDesktop("36") }}{{CompatNo}}11.60{{ property_prefix("-o") }}
- 19.0		10.0
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support4.4.4{{ CompatGeckoDesktop("36") }}{{CompatNo}}11.5{{ property_prefix("-o") }}
- 24		{{ CompatNo }}
-
-[1] WebKit Nightly fixed in bug 122811.
- -

See also

- - 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 ---- -
{{CSSRef}}
- -

Die CSS-Eigenschaft perspective-origin CSS property determines the position at which the viewer is looking. It is used as the vanishing point by the {{cssxref("perspective")}} property.

- -
{{EmbedInteractiveExample("pages/css/perspective-origin.html")}}
- - - -

The perspective-origin and {{cssxref('perspective')}} properties are attached to the parent of a child transformed in 3-dimensional space, unlike the perspective() transform function which is placed on the element being transformed.

- -

Syntax

- -
/* 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;
-
- -

Values

- -
-
x-position
-
Indicates the position of the abscissa of the vanishing point. It can have one of the following values: -
    -
  • {{cssxref("<length-percentage>")}} indicating the position as an absolute length value or relative to the width of the element. The value may be negative.
    • -
  • left, a keyword being a shortcut for the 0 length value.
    • -
  • center, a keyword being a shortcut for the 50% percentage value.
    • -
  • right, a keyword being a shortcut for the 100% percentage value.
    • -
-
-
y-position
-
Indicates the position of the ordinate of the vanishing point. It can have one of the following values: -
    -
  • {{cssxref("<length-percentage>")}} indicating the position as an absolute length value or relative to the height of the element. The value may be negative.
    • -
  • top, a keyword being a shortcut for the 0 length value.
    • -
  • center, a keyword being a shortcut for the 50% percentage value.
    • -
  • bottom, a keyword being a shortcut for the 100% percentage value.
    • -
-
-
- -

Formal definition

- -

{{cssinfo}}

- -

Formal syntax

- -{{csssyntax}} - -

Examples

- -

Changing the perspective origin

- -

This example shows cubes with popular perspective-origin values.

- -

HTML

- -
<section>
-
-<figure>
-  <figcaption><code>perspective-origin: top left;</code></figcaption>
-    <div class="container">
-     <div class="cube potl">
-      <div class="face front">1</div>
-      <div class="face back">2</div>
-      <div class="face right">3</div>
-      <div class="face left">4</div>
-      <div class="face top">5</div>
-      <div class="face bottom">6</div>
-     </div>
-    </div>
-</figure>
-
-<figure>
-  <figcaption><code>perspective-origin: top;</code></figcaption>
-   <div class="container">
-    <div class="cube potm">
-      <div class="face front">1</div>
-      <div class="face back">2</div>
-      <div class="face right">3</div>
-      <div class="face left">4</div>
-      <div class="face top">5</div>
-      <div class="face bottom">6</div>
-    </div>
-  </div>
-</figure>
-
-<figure>
-  <figcaption><code>perspective-origin: top right;</code></figcaption>
-  <div class="container">
-    <div class="cube potr">
-      <div class="face front">1</div>
-      <div class="face back">2</div>
-      <div class="face right">3</div>
-      <div class="face left">4</div>
-      <div class="face top">5</div>
-      <div class="face bottom">6</div>
-    </div>
-  </div>
-</figure>
-
-<figure>
-  <figcaption><code>perspective-origin: left;</code></figcaption>
-  <div class="container">
-    <div class="cube poml">
-      <div class="face front">1</div>
-      <div class="face back">2</div>
-      <div class="face right">3</div>
-      <div class="face left">4</div>
-      <div class="face top">5</div>
-      <div class="face bottom">6</div>
-    </div>
-  </div>
-</figure>
-
-<figure>
-  <figcaption><code>perspective-origin: 50% 50%;</code></figcaption>
-  <div class="container">
-    <div class="cube pomm">
-      <div class="face front">1</div>
-      <div class="face back">2</div>
-      <div class="face right">3</div>
-      <div class="face left">4</div>
-      <div class="face top">5</div>
-      <div class="face bottom">6</div>
-    </div>
-  </div>
-</figure>
-
-<figure>
-  <figcaption><code>perspective-origin: right;</code></figcaption>
-  <div class="container">
-    <div class="cube pomr">
-      <div class="face front">1</div>
-      <div class="face back">2</div>
-      <div class="face right">3</div>
-      <div class="face left">4</div>
-      <div class="face top">5</div>
-      <div class="face bottom">6</div>
-    </div>
-  </div>
-</figure>
-
-<figure>
-  <figcaption><code>perspective-origin: bottom left;</code></figcaption>
-  <div class="container">
-    <div class="cube pobl">
-      <div class="face front">1</div>
-      <div class="face back">2</div>
-      <div class="face right">3</div>
-      <div class="face left">4</div>
-      <div class="face top">5</div>
-      <div class="face bottom">6</div>
-    </div>
-  </div>
-</figure>
-
-<figure>
-  <figcaption><code>perspective-origin: bottom;</code></figcaption>
-  <div class="container">
-    <div class="cube pobm">
-      <div class="face front">1</div>
-      <div class="face back">2</div>
-      <div class="face right">3</div>
-      <div class="face left">4</div>
-      <div class="face top">5</div>
-      <div class="face bottom">6</div>
-    </div>
-  </div>
-</figure>
-
-<figure>
-  <figcaption><code>perspective-origin: bottom right;</code></figcaption>
-  <div class="container">
-    <div class="cube pobr">
-      <div class="face front">1</div>
-      <div class="face back">2</div>
-      <div class="face right">3</div>
-      <div class="face left">4</div>
-      <div class="face top">5</div>
-      <div class="face bottom">6</div>
-    </div>
-  </div>
-</figure>
-
-<figure>
-  <figcaption><code>perspective-origin: -200% -200%;</code></figcaption>
-  <div class="container">
-    <div class="cube po200200neg">
-      <div class="face front">1</div>
-      <div class="face back">2</div>
-      <div class="face right">3</div>
-      <div class="face left">4</div>
-      <div class="face top">5</div>
-      <div class="face bottom">6</div>
-    </div>
-  </div>
-</figure>
-
-<figure>
-  <figcaption><code>perspective-origin: 200% 200%;</code></figcaption>
-  <div class="container">
-    <div class="cube po200200pos">
-      <div class="face front">1</div>
-      <div class="face back">2</div>
-      <div class="face right">3</div>
-      <div class="face left">4</div>
-      <div class="face top">5</div>
-      <div class="face bottom">6</div>
-    </div>
-  </div>
-</figure>
-
-<figure>
-  <figcaption><code>perspective-origin: 200% -200%;</code></figcaption>
-  <div class="container">
-    <div class="cube po200200">
-      <div class="face front">1</div>
-      <div class="face back">2</div>
-      <div class="face right">3</div>
-      <div class="face left">4</div>
-      <div class="face top">5</div>
-      <div class="face bottom">6</div>
-    </div>
-  </div>
-</figure>
-
-</section>
-
- -

CSS

- -
/* 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);
-}
- -

Result

- -

{{EmbedLiveSample('Changing_the_perspective_origin', '100%', 700)}}

- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS Transforms 2', '#perspective-origin-property', 'perspective-origin')}}{{Spec2('CSS Transforms 2')}}Initial definition.
- -

Browser compatibility

- -
- - -

{{Compat("css.properties.perspective-origin")}}

-
- -

See also

- - 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 ---- -
{{cssref}}
- -

Shorthand properties 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.

- -

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.

- -

Tricky edge cases

- -

Even if they are very convenient to use, there are a few edge cases to keep in mind when using them:

- -
    -
  1. A value which is not specified is set to its initial value. That sounds anecdotal, but it really means that it overrides previously set values. Therefore: - - 
    background-color: red;
-background: url(images/bg.gif) no-repeat left top;
-
    - will not set the color of the background to red but to {{cssxref("background-color")}}'s default, transparent, as the second rule has precedence.
    2. -
  2. 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 inherit 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 inherit.
    3. -
  3. 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: -
      -
    1. 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: - - - - - - - - - - - - - - - - - - - -
      border1.pngThe 1-value syntax: border-width: 1em — The unique value represents all edges
      border2.pngThe 2-value syntax: border-width: 1em 2em — The first value represents the vertical, that is top and bottom, edges, the second the horizontal ones, that is the left and right ones.
      border3.pngThe 3-value syntax: border-width: 1em 2em 3em — The first value represents the top edge, the second, the horizontal, that is left and right, ones, and the third value the bottom edge
      border4.png -

      The 4-value syntax: border-width: 1em 2em 3em 4em — 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 trouble: TRBL) (You can also remember it as the order that the hands would rotate on a clock: 1em starts in the 12 o'clock position, then 2em in the 3 o'clock position, then 3em in the 6 o'clock position, and 4em in the 9 o'clock position).

      -
      -
      2. -
    2. 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: - - - - - - - - - - - - - - - - - - - -
      corner1.pngThe 1-value syntax: border-radius: 1em — The unique value represents all corners
      corner2.pngThe 2-value syntax: border-radius: 1em 2em — The first value represents the top left and bottom right corner, the second the top right and bottom left ones.
      corner3.pngThe 3-value syntax: border-radius: 1em 2em 3em — 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
      corner4.png -

      The 4-value syntax: border-radius: 1em 2em 3em 4em — 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.

      -
      -
      3. -
    -
    4. -
- -

Background properties

- -

A background with the following properties ...

- -
background-color: #000;
-background-image: url(images/bg.gif);
-background-repeat: no-repeat;
-background-position: left top;
- -

... can be shortened to just one declaration:

- -
background: #000 url(images/bg.gif) no-repeat left top;
- -

(The shorthand form is actually the equivalent of the longhand properties above plus background-attachment: scroll and, in CSS3, some additional properties.)

- -

See {{cssxref("background")}} for more detailed information, including CSS3 properties.

- -

Font properties

- -

The following declarations ...

- -
font-style: italic;
-font-weight: bold;
-font-size: .8em;
-line-height: 1.2;
-font-family: Arial, sans-serif;
- -

... can be shortened to the following:

- -
font: italic bold .8em/1.2 Arial, sans-serif;
- -

This shorthand declaration is actually equivalent to the longhand declarations above plus font-variant: normal and font-size-adjust: none (CSS2.0 / CSS3), font-stretch: normal (CSS3).

- -

Border properties

- -

With borders, the width, color, and style can be simplified into one declaration. For example, the following CSS ...

- -
border-width: 1px;
-border-style: solid;
-border-color: #000;
- -

... can be simplified as:

- -
border: 1px solid #000;
- -

Margin and padding properties

- -

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 ...

- -
margin-top: 10px;
-margin-right: 5px;
-margin-bottom: 10px;
-margin-left: 5px;
- -

... 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").

- -
margin: 10px 5px 10px 5px;
- -

Margin shorthand rules for one, two, three and four value declarations are:

- - - -

The universal shorthand property

- -

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:

- -

{{page("/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance", "Controlling_inheritance")}}

- -

See Cascade and inheritance or Introducing the CSS Cascade for more information about how inheritance works in CSS.

- -

See also

- - 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 ---- -
{{CSSRef}}
- -

In CSS The Visual Formatting Model 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.

- -

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:

- - - -

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.

- -

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.

- -

The role of the viewport

- -

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.

- -

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 block dimension — vertically in a horizontal, top-to-bottom language. However, you might design something that requires scrolling in the inline dimension too.

- -

Box generation

- -

Box generation 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.

- -

Initially defined in CSS2, the display property is extended in the CSS Display Module Level 3. In addition, some of the terminologies around the display have been updated and clarified in the years since CSS2.

- -

CSS takes your source document and renders it onto a canvas. To do this, it generates an intermediary structure, the box tree, 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.

- -

Then, for each element, CSS generates zero or more boxes as specified by that element’s display property value.

- -
-

Note: Boxes are often referred to by their display type — e.g. a box generated by an element with display: block 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.

-
- -

The principal box

- -

When an element generates one or more boxes, one of them is the principal box, which contains its descendant boxes and generated content in the box tree, and is also the box involved in any positioning scheme.

- -

Some elements may generate additional boxes in addition to the principal box, for example display: list-item generates more than one box (e.g. a principal block box and a child marker box). And some values (such as none or contents) cause the element and/or its descendants to not generate any boxes at all.

- -

Anonymous boxes

- -

An anonymous box is created when there is not an HTML element to use for the box. This situation happens when, for example, you declare display: flex 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.

- -

{{EmbedGHLiveSample("css-examples/visual-formatting/anonymous-flex.html", '100%', 720)}}

- -

The same thing happens when you have text runs interspersed with block elements. In the next example I have a string inside a <div>; in the middle of my string is a <p> element containing part of the text.

- -

{{EmbedGHLiveSample("css-examples/visual-formatting/anonymous-block.html", '100%', 720)}}

- -

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 <p>, which generates a box, and then another anonymous box.

- -

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.

- -

Inline anonymous boxes are created when a string is split by an inline element, for example, a sentence that includes a section wrapped with <em></em>. This splits the sentence into three inline boxes — an anonymous inline box before the emphasized section, the section wrapped in the <em> 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 <em> can; they just inherit the styles of their container.

- -

Other formatting contexts also create anonymous boxes. Grid Layout behaves in the same way as the flexbox example above, turning strings of text into a grid item with an anonymous box. Multiple-column layout creates anonymous column boxes around the columns; these also cannot be styled or otherwise targetted. Table layout will add anonymous boxes to create a proper table structure — for example adding an anonymous table row — if there was no box with display: table-row.

- -

Line boxes

- -

Line boxes 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.

- -

In the following example, the line boxes following the floated <div> 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.

- -

{{EmbedGHLiveSample("css-examples/visual-formatting/line-boxes.html", '100%', 720)}}

- -

Positioning schemes and in-flow and out-of-flow elements

- -

In CSS, a box may be laid out according to three positioning schemes — normal flow, floats, or absolute positioning.

- -

Normal flow

- -

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.

- -

Read more about flow layout in CSS.

- -

Floats

- -

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.

- -

Find out more about floats.

- -

Absolute positioning

- -

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).

- -

An element is called out of flow if it is floated, absolutely positioned, or is the root element. An element is called in-flow if it is not out of the flow.

- -

Read about CSS Positioned Layout.

- -

Formatting contexts and the display property

- -

Boxes can be described as having an outer display type, which is block or inline. This outer display type refers to how the box behaves alongside other elements on the page.

- -

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 flow. This means that the child elements will also be either block or inline.

- -

However, the inner display type might be something like grid or flex, 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 formatting context. 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.

- -

The interactions between block-level and inline-level boxes are described in the MDN documentation for {{cssxref("display")}}.

- -

In addition, the references for specific values of display explain how these formatting contexts work in terms of box layout.

- - - -

Independent formatting contexts

- -

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 Grid Formatting Context for its children.

- -

Independent formatting contexts 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 display: flow-root creates a new block formatting context in order to gain the useful effects of this, without any unwanted issues caused by changing the value of overflow.

- -

Block boxes

- -

In specifications, block boxes, block-level boxes, and block containers are all referred to as block boxes in certain places. These things are somewhat different and the term block box should only be used if there is no ambiguity.

- -

Block containers

- -

A block container 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.

- -

Inline-level and block-level boxes

- -

These are the boxes contained inside the block container that are participating in inline or block layout, respectively.

- -

Block boxes

- -

A block box is a block-level box that is also a block container. As described in CSS display, 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).

- -

See also

- - 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 ---- -

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.

- 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 ---- -
{{HTMLRef}}
- -

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. Mit CSS gibt es viele Möglichkeiten, den HTML elements Farbe zu verleihen. Dieser Artikel ist eine Einführung, die jede Möglichkeit vorstellt, CSS Farben in HTML zu verwenden.

- -

Zum Glück ist das Hinzufügen von Farbe zu deinem HTML eigentlich wirklich easy und du kannst Farbe zu fast allem hinzufügen.

- -

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")}}.

- -

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

- -

Dinge, die Farbe haben können

- -

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.

- -

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.

- -

Text

- -

Wo auch immer ein Element gerendert wurde sind diese Elemente dazu da, die Farbe des Textes, seinen Hintergrund oder Dekorationen des Textes festzulegen.

- -
-
{{cssxref("color")}}
-
Legt die Farbe von Text und text decorations fest (wie z. B. die Ergänzung von Über- oder Unterstrichen, durchgestrichene Linien, usw.)
-
{{cssxref("background-color")}}
-
Die Hintergrundfarbe des Textes.
-
{{cssxref("text-shadow")}}
-
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.
-
{{cssxref("text-decoration-color")}}
-
Als Standardeinstellung verwenden Textdekorationen (wie z. B. Unterstreichungen, Durchstreichungen, etc.) die color Eigenschaft als ihre Farbe. Jedoch können sie diese Einstellung überschreiben und eine andere Farbe mit der text-decoration-color Eigenschaft verwenden.
-
{{cssxref("text-emphasis-color")}}
-
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.
-
{{cssxref("caret-color")}}
-
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.
-
- -

Boxen

- -

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.

- -
-
{{anch("Borders")}}
-
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.
-
{{cssxref("background-color")}}
-
Farbe auf Bereiche eines Elements anwenden, die keinen Inhalt im Vordergrund haben.
-
{{cssxref("column-rule-color")}}
-
Farbe auf Linien anwenden, die Textspalten trennen.
-
{{cssxref("outline-color")}}
-
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.
-
- -

Ränder (Borders)

- -

Jedes Element kann einen Rand (border) 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 Styling borders using CSS to learn more about applying styles to borders.

- -

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 width, style (solid, dashed, etc.), and so forth.

- -
-
{{cssxref("border-color")}}
-
Specifies a single color to use for every side of the element's border.
-
{{cssxref("border-left-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-top-color")}}, and {{cssxref("border-bottom-color")}}
-
Lets you set the color of the corresponding side of the element's border.
-
{{cssxref("border-block-start-color")}} and {{cssxref("border-block-end-color")}}
-
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).
-
{{cssxref("border-inline-start-color")}} and {{cssxref("border-inline-end-color")}}
-
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 border-inline-start-color is applied to the right side of the border.
-
- -

Andere Methoden um Farbe zu verwenden

- -

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.

- -
-
Die  HTML Canvas API
-
Lets you draw 2D bitmapped graphics in a {{HTMLElement("canvas")}} element. See our Canvas tutorial to learn more.
-
SVG (Scalable Vector Graphics)
-
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.
-
WebGL
-
The Web Graphics Library is an OpenGL ES-based API for drawing high-performance 2D and 3D graphics on the Web. See Learn WebGL for 2D and 3D graphics to find out more.
-
- -

Wie man eine Farbe definiert

- -

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.

- -

For more detailed discussion of each of the color value types, see the reference for the CSS {{cssxref("<color>")}} unit.

- -

Schlüsselwörter

- -

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 red, blue, or orange), shades of gray (from black to white, including colors like darkgray and lightgrey), and a variety of other blended colors including lightseagreen, cornflowerblue, and rebeccapurple.

- -

See {{SectionOnPage("/en-US/docs/Web/CSS/color_value", "Color keywords", "code")}} for a list of all available color keywords.

- -

RGB-Werte

- -

There are three ways to represent an RGB color in CSS.

- -

Hexadezimale String Notation

- -

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 must 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, "#D" becomes "#DD" when drawing.

- -

A color in hexadecimal string notation always begins with the character "#". After that come the hexadecimal digits of the color code. The string is case-insensitive.

- -
-
"#rrggbb"
-
Specifies a fully-opaque color whose red component is the hexadecimal number 0xrr, green component is 0xgg, and blue component is 0xbb.
-
"#rrggbbaa"
-
Specifies a color whose red component is the hexadecimal number 0xrr, green component is 0xgg, and blue component is 0xbb. The alpha channel is specified by 0xaa; the lower this value is, the more translucent the color becomes.
-
"#rgb"
-
Specifies a color whose red component is the hexadecimal number 0xrr, green component is 0xgg, and blue component is 0xbb.
-
"#rgba"
-
Specifies a color whose red component is the hexadecimal number 0xrr, green component is 0xgg, and blue component is 0xbb. The alpha channel is specified by 0xaa; the lower this value is, the more translucent the color becomes.
-
- -

As an example, you can represent the opaque color bright blue as "#0000ff" or "#00f". To make it 25% opaque, you can use "#0000ff44" or "#00f4".

- -

RGB functional notation

- -

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.

- -

Legal values for each of these parameters are:

- -
-
red, green, and blue
-
Each must be an {{cssxref("<integer>")}} value between 0 and 255 (inclusive), or a {{cssxref("<percentage>")}} from 0% to 100%.
-
alpha
-
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.
-
- -

For example, a bright red that's 50% opaque can be represented as rgb(255, 0, 0, 0.5) or rgb(100%, 0, 0, 50%).

- -

HSL functional notation

- -

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 hsl() CSS function is very similar to the rgb() function in usage otherwise.

- -
-
HSL color cylinder -
Figure 1. An HSL color cylinder. 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 SharkD on Wikipedia, distributed under the CC BY-SA 3.0 license.
-
-
- -

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("<angle>")}} unit supported by CSS, including degrees (deg), radians (rad), gradians (grad), or turns (turn). But this doesn't control how vivid or dull, or how bright or dark the color is.

- -

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.

- -

Think of it like creating the perfect paint color:

- -
    -
  1. 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 hue (H) component: a value representing the angle around the color wheel for the vivid hue we want to use as our base.
    2. -
  2. 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.
    3. -
  3. 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.
    4. -
- -

You can also optionally include an alpha channel, to make the color less than 100% opaque.

- -

Here are some sample colors in HSL notation:

- -
- - -

{{EmbedLiveSample("hsl-swatches", 300, 260)}}

-
- -
-

Note that when you omit the hue's unit, it's assumed to be in degrees (deg).

-
- -

Farbe verwenden

- -

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.

- -

Specifying colors in stylesheets

- -

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.

- -

Let's take a look at an example, starting by looking at the results we're trying to achieve:

- -
{{EmbedLiveSample("Specifying_colors_in_stylesheets", 650, 150)}}
- -

HTML

- -

The HTML responsible for creating the above example is shown here:

- -
<div class="wrapper">
-  <div class="box boxLeft">
-    <p>
-      This is the first box.
-    </p>
-  </div>
-  <div class="box boxRight">
-    <p>
-      This is the second box.
-    </p>
-  </div>
-</div>
- -

This is pretty simple, using a {{HTMLElement("div")}} as a wrapper around the contents, which consists of two more <div>s, each styled differently with a single paragraph ({{HTMLElement("p")}}) in each box.

- -

The magic happens, as usual, in the CSS, where we'll apply colors define the layout for the HTML above.

- -

CSS

- -

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.

- -
.wrapper {
-  width: 620px;
-  height: 110px;
-  margin: 0;
-  padding: 10px;
-  border: 6px solid mediumturquoise;
-}
- -

The .wrapper 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")}}.

- -

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 mediumturquoise.

- -

Our two colored boxes share a number of properties in common, so next we establish a class, .box, that defines those shared properties:

- -
.box {
-  width: 290px;
-  height: 100px;
-  margin: 0;
-  padding: 4px 6px;
-  font: 28px "Marker Felt", "Zapfino", cursive;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
- -

In brief, .box establishes the size of each box, as well as the configuration of the font used within. We also take advantage of CSS Flexbox to easily center the contents of each box. We enable flex mode using {{cssxref("display", "display: flex")}}, and set both {{cssxref("justify-content")}} and {{cssxref("align-items")}} to center. Then we can create a class for each of the two boxes that defines the propeties that differ between the two.

- -
.boxLeft {
-  float: left;
-  background-color: rgb(245, 130, 130);
-  outline: 2px solid darkred;
-}
- -

The .boxLeft class—which, cleverly, is used to style the box on the left—floats the box to the left, then sets up the colors:

- - - -
.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;
-}
- -

Finally, the .boxRight 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:

- - - -

Dem Nutzer die Farbe wählen lassen

- -

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 "color" as the value of its {{htmlattrxref("type", "input")}} attribute.

- -

The <input> element represents a color only in the {{anch("Hexadecimal string notation", "hexadecimal string notation")}} covered above.

- -

Beispiel: Farbe wählen

- -

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.

- -

{{EmbedLiveSample("Example_Picking_a_color", 525, 275)}}

- -
-

On macOS, you indicate that you've finalized selection of the color by closing the color picker window.

-
- -

HTML

- -

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.

- -
<div id="box">
-  <label for="colorPicker">Border color:</label>
-  <input type="color" value="#8888ff" id="colorPicker">
-  <p id="output"></p>
-</div>
- -

CSS

- -

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...

- -
#box {
-  width: 500px;
-  height: 200px;
-  border: 2px solid rgb(245, 220, 225);
-  padding: 4px 6px;
-  font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif"
-}
- -

JavaScript

- -

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 <input type="color"> element.

- -
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);
- -

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.

- -

The {{event("change")}} event is received when the color picker's value is finalized. We respond by setting the contents of the <p> element with the ID "output" to a string describing the finally selected color.

- -

Farbe klug verwenden

- -

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.

- -

Die richtigen Farben finden

- -

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.

- -

Base color

- -

The first step is to choose your base color. 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:

- - - -

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 ColorZilla offers an extension (Chrome / Firefox) 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.

- -
-

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.

-
- -

Fleshing out the palette

- -

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.

- -

A few examples (all free to use as of the time this list was last revised):

- - - -

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.

- -
-

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.

-
- -

Ressourcen zu Farbentheorie

- -

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:

- -
-
Color Science (Khan Academy in association with Pixar)
-
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.
-
{{interwiki("wikipedia", "Color theory")}} on Wikipedia
-
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.
-
- -

Farbe und Barrierefreiheit

- -

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.

- -

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.

- -
-

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.

-
- -

For more information about color blindness, see the following articles:

- - - -

Palette design example

- -

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 Google search for photos of Mars. 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.

- -

Using an eyedropper tool, we identify a color we like and determine that the color in question is #D79C7A, which is an appropriate rusty orange-red color that's so stereotypical of the Martian surface.

- -

Having selected our base color, we need to build out our palette. We decide to use Paletteon to come up with the other colors we need. Upon opening Paletton, we see:

- -

Right after loading Paletton.

- -

Next, we enter our color's hex code (D79C7A) into the "Base RGB" box at the bottom-left corner of the tool:

- -

After entering base color

- -

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 #508D7C.

- -

Now with complementary colors included.

- -

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:

- -

Triad color scheme selected

- -

That greyish blue in the top-right looks pretty good. Clicking on it, we find that it's #556E8D. 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:

- -

Triad color scheme selected

- -

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.

- -

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.

- -

See also

- - 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: -slug: Web/HTML/Element/Input/button -tags: - - Eingabeelement - - Element - - HTML - - Referenz -translation_of: Web/HTML/Element/input/button ---- -

{{HTMLRef}}

- -

Das HTML <input type="button"> Element ist eine bestimmte Version des <input> Elements. Es wird benutzt, um einen anklickbaren Button zu generieren, der jedoch keinen voreingestellten Wert hat.

- -

Browser generieren einen Controller für clickbare Buttons ohne Standartwert. Ein Button kann beliebige Beschriftungen besitzen. Der Controller selbst variiert von Browser zu Browser.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Content categoriesFlow content, phrasing content, Interactive content, listed, labelable, and submittable form-associated element, palpable content.
Permitted contentPhrasing content.
Tag omissionNone, both the starting and ending tag are mandatory. 
Permitted parent elementsAny element that accepts phrasing content.
DOM interfaceHTMLButtonElement
Element TypInline
- -

Attributes

- -

Dieses Element kann zusätzlich zu den globalen Attribute jedes der folgenden besitzen:

- -
-
{{htmlattrdef("disabled")}}
-
-

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 disabled attribute set, then the button is enabled. The disabled control's value isn't submitted with the form and the click event will not be dispatched on disabled controls.

-
-
-

Firefox will, unlike other browsers, by default, persist the dynamic disabled state of a {{HTMLElement("button")}} across page loads. Use the {{htmlattrxref("autocomplete","button")}} attribute to control this feature.

-
-
{{htmlattrdef("autofocus")}} {{HTMLVersionInline(5)}}
-
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.
-
{{htmlattrdef("autocomplete")}} {{non-standard_inline}}
-
The use of this attribute on a {{HTMLElement("button")}} is nonstandard and Firefox-specific. By default, unlike other browsers, Firefox persists the dynamic disabled state of a {{HTMLElement("button")}} across page loads. Setting the value of this attribute to off (i.e., autocomplete="off") disables this feature.
-
{{htmlattrdef("form")}} {{HTMLVersionInline(5)}}
-
The form element that the button is associated with (its form owner). The value of the attribute must be the id attribute of a {{HTMLElement("form")}} element in the same document. If this attribute is not specified, the <button> element must be a descendent of a form element. This attribute enables you to place <button> elements anywhere within a document, not just as descendents of their {{HTMLElement("form")}} elements.
-
{{htmlattrdef("formenctype")}}
-
Since the input element is a submit button, the formenctype attribute specifies the type of content that is used to submit the form to the server. Possible values are: -
    -
  • application/x-www-form-urlencoded: The default value if the attribute is not specified.
    • -
  • multipart/form-data: This value is used if an {{HTMLElement("input")}} element is used with the {{htmlattrxref("type","input")}} attribute set to file.
    • -
  • text/plain
    • -
- -

If this attribute is specified, it overrides the {{htmlattrxref("enctype","form")}} attribute of the element's form owner.

-
-
{{htmlattrdef("formaction")}} {{HTMLVersionInline(5)}}
-
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.
-
{{htmlattrdef("formmethod")}}
-
Since the input element is a submit button, the formmethod attribute specifies the HTTP method that the browser uses to submit the form. Possible values are: -
    -
  • post: The data from the form is included in the body of the form and is sent to the server.
    • -
  • get: The data from the form is appended to the form 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.
    • -
- -

If specified, this attribute overrides the {{htmlattrxref("method","form")}} attribute of the element's form owner.

-
-
{{htmlattrdef("formnovalidate")}}
-
Since the input element is a submit button, the formnovalidate 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.
-
{{htmlattrdef("formtarget")}}
-
Since the input element is a submit button, the formtarget 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 browsing context (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: -
    -
  • _self: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.
    • -
  • _blank: Load the response into a new unnamed browsing context.
    • -
  • _parent: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as _self.
    • -
  • _top: 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 _self.
    • -
-
-
{{htmlattrdef("name")}}
-
Der Name der Schaltfläche, der mit den Formulardaten übermittelt wird.
-
{{htmlattrdef("type")}}
-
The type of the button. Possible values are: -
    -
  • submit: 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.
    • -
  • reset: The button resets all the controls to their initial values.
    • -
  • button: 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.
    • -
-
-
{{htmlattrdef("value")}}
-
The initial value of the button.
-
- -

Beispiele

- -
<input type="button" value="Klick mich">
-
- -

Das erstellt einen neuen Button mit der Beschriftung: 'Klick mich'.

- -

Specifications

- - - - - - - - - - - - - - - - - - - - -
SpecificationStatus
{{SpecName('HTML WHATWG', 'the-button-element.html#the-button-element', '<button>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'forms.html#the-button-element', '<button>')}}{{Spec2('HTML5 W3C')}}
{{SpecName('HTML4.01', 'interact/forms.html#h-17.5', '<button>')}}{{Spec2('HTML4.01')}}
- -

Browser Compatibiltiy

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Browser Compatibility
FeatureChromeGecko (Firefox)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
formenctype attribute9.0{{CompatGeckoDesktop("2.0")}}1010.6{{CompatUnknown}}
formmethod attribute9.0{{CompatGeckoDesktop("2.0")}}10{{CompatUnknown}}{{CompatUnknown}}
autofocus attribute5.0{{CompatGeckoDesktop("2.0")}}109.65.0
formaction attribute9.0{{CompatGeckoDesktop("2.0")}}10{{CompatUnknown}}{{CompatUnknown}}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Mobile Browser Compatibility
FeatureAndroidGecko (Firefox Mobile)Internet Explorer MobileOpera MobileSafari Mobile
Basic Support{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
formaction attribute{{CompatUnknown}}{{CompatGeckoMobile("2.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
formenctype attribute{{CompatUnknown}}{{CompatGeckoMobile("2.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
formmethod attribute{{CompatUnknown}}{{CompatGeckoMobile("2.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
- -

See also

- - 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: -slug: Web/HTML/Element/th -translation_of: Web/HTML/Element/th ---- -

Übersicht

- -

Das  HTML Element table header cell <th> 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.

- -

Gebrauchsübersicht

- - - - - - - - - - - - - - - - - - - - - - - - -
Content categoriesNone.
Permitted content -
-
Phrasing content.
-
-
Tag omissionThe start tag is mandatory.
- 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.
Permitted parent elementsA {{HTMLElement("tr")}} element.
Normative documentHTML5, section 4.9.10 (HTML4.01, section 11.2.6)
- -

Attribute

- -

This element includes the global attributes.

- -
-
{{htmlattrdef("abbr")}} {{obsolete_inline}} in {{HTMLVersionInline("5")}}
-
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. -
Note: 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 title attribute.
-
-
{{htmlattrdef("align")}} {{Deprecated_inline}} in {{HTMLVersionInline("4")}}, {{obsolete_inline}} in {{HTMLVersionInline("5")}}
-
This enumerated attribute specifies how horizontal alignment of each cell content will be handled. Possible values are: -
    -
  • left, aligning the content to the left of the cell
    • -
  • center, centering the content in the cell
    • -
  • right, aligning the content to the right of the cell
    • -
  • justify, inserting spaces into the textual content so that the content is justified in the cell
    • -
  • char, 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")}}.
    • -
- -

If this attribute is not set, the left value is assumed.

- -
Note: Do not use this attribute as it is obsolete (not supported) in the latest standard. - -
    -
  • To achieve the same effect as the left, center, right or justify values, use the CSS {{cssxref("text-align")}} property on it.
    • -
  • To achieve the same effect as the char value, in CSS3, you can use the value of the {{htmlattrxref("char", "th")}} as the value of the {{cssxref("text-align")}} property {{unimplemented_inline}}.
    • -
-
-
-
- -
-
{{htmlattrdef("axis")}} {{obsolete_inline}} in {{HTMLVersionInline("5")}}
-
This attribute contains a list of space-separated strings. Each string is the id of a group of cells that this header apply to. -
Note: Do not use this attribute as it is obsolete in the latest standard: instead use the {{htmlattrxref("scope", "th")}} attribute.
-
-
{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}
-
This attribute defines the background color of each cell of the column. It is one of the 6-digit hexadecimal code as defined in sRGB, prefixed by a '#'. One of the sixteen predefined color strings may be used: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 black = "#000000" green = "#008000"
 silver = "#C0C0C0" lime = "#00FF00"
 gray = "#808080" olive = "#808000"
 white = "#FFFFFF" yellow = "#FFFF00"
 maroon = "#800000" navy = "#000080"
 red = "#FF0000" blue = "#0000FF"
 purple = "#800080" teal = "#008080"
 fuchsia = "#FF00FF" aqua = "#00FFFF"
- -
Usage note: 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 CSS. To give a similar effect to the bgcolor attribute, use the CSS property {{cssxref("background-color")}} instead.
-
-
- -
-
{{htmlattrdef("char")}} {{Deprecated_inline}} in {{HTMLVersionInline("4")}}, {{obsolete_inline}} in {{HTMLVersionInline("5")}}
-
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 char, this attribute is ignored. -
Note: 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}}.
-
-
- -
-
{{htmlattrdef("charoff")}} {{Deprecated_inline}} in {{HTMLVersionInline("4")}}, {{obsolete_inline}} in {{HTMLVersionInline("5")}}
-
This attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the char attribute. -
Note: Do not use this attribute as it is obsolete (and not supported) in the latest standard.
-
-
- -
-
{{htmlattrdef("colspan")}}
-
This attribute contains a non-negative integer value that indicates on how many columns does the cell extend. Its default value is 1; if its value is set to 0, 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.
-
{{htmlattrdef("headers")}}
-
This attributes a list of space-separated strings, each corresponding to the id attribute of the {{HTMLElement("th")}} elements that applies to this element.
-
{{htmlattrdef("rowspan")}}
-
This attribute contains a non-negative integer value that indicates on how many rows does the cell extend. Its default value is 1; if its value is set to 0, 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.
-
{{htmlattrdef("scope")}}
-
This enumerated attribute defines the cells that the header defined in this {{HTMLElement("th")}} element relates to. It may have the following values: -
    -
  • row, which means that the header relates to all cells in the row that this element belongs to;
    • -
  • col, which means that the header relates to all cells in the column that this element belongs to;
    • -
  • rowgroup, 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;
    • -
  • colgroup, which means that the header relates to all remaining cells in the column group that this element belongs to;
    • -
  • auto
    • -
-
-
{{htmlattrdef("valign")}} {{Deprecated_inline}} in {{HTMLVersionInline("4")}}, {{obsolete_inline}} in {{HTMLVersionInline("5")}}
-
This attribute specifies the vertical alignment of the text within each row of cells of the table header. Possible values for this attribute are: -
    -
  • baseline, which will put the text as close to the bottom of the cell as it is possible, but align it on the baseline of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as bottom.
    • -
  • bottom, which will put the text as close to the bottom of the cell as it is possible;
    • -
  • middle, which will center the text in the cell;
    • -
  • and top, which will put the text as close to the top of the cell as it is possible.
    • -
- -
Note: 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.
-
-
{{htmlattrdef("width")}} {{Deprecated_inline}} in {{HTMLVersionInline(4.01)}}
-
This attribute is used to define a recommended cell width.  Properties cellspacing and cellpadding 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. -
Note: Do not use this attribute in the latest standard: instead set the CSS {{cssxref("width")}} property.
-
-
- -

DOM interface

- -

This element implements the HTMLTableHeaderCellElement interface.

- -

Beispiele

- -

See {{HTMLElement("table")}} for examples on <th>.

- -

Kompatibilät

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
align/valign attribute1.0{{CompatNo}} {{bug("915")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
char/charoff attribute1.0{{CompatNo}} {{bug("2212")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
bgcolor attribute {{Non-standard_inline}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
align/valign attribute{{CompatUnknown}}{{CompatNo}} {{bug("915")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
char/charoff attribute{{CompatUnknown}}{{CompatNo}} {{bug("2212")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
bgcolor attribute {{Non-standard_inline}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}
-
- -

Siehe auch

- - - -

{{HTMLRef}}

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 ---- -
{{HTMLSidebar("Global_attributes")}}
- -

The is global attribute allows you to specify that a standard HTML element should behave like a defined custom built-in element (see Using custom elements for more details).

- -

This attribute can only be used if the specified custom element name has been successfully defined in the current document, and extends the element type it is being applied to.

- -

Examples

- -

The following code is taken from our word-count-web-component example (see it live also).

- -
// 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' });
- -
<p is="word-count"></p>
- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', "custom-elements.html#attr-is", "is")}}{{Spec2('HTML WHATWG')}} 
- -

Browser compatibility

- - - -

{{Compat("html.global_attributes.is")}}

- -

See also

- - 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 ---- -
{{HTTPSidebar}}
- -

The Connection general header controls whether or not the network connection stays open after the current transaction finishes. If the value sent is keep-alive, the connection is persistent and not closed, allowing for subsequent requests to the same server to be done.

- -
-

Connection-specific header fields such as {{HTTPHeader("Connection")}} and {{HTTPHeader("Keep-Alive")}} are prohibited in HTTP/2. 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.

-
- -

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 Connection 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).

- - - - - - - - - - - - -
Header type{{Glossary("General header")}}
{{Glossary("Forbidden header name")}}yes
- -

Syntax

- -
Connection: keep-alive
-Connection: close
-
- -

Directives

- -
-
close
-
Indicates that either the client or the server would like to close the connection. This is the default on HTTP/1.0 requests.
-
any comma-separated list of HTTP headers [Usually keep-alive only]
-
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.
-
- -

Browser compatibility

- -

{{Compat("http.headers.Connection")}}

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 ---- -
{{HTTPSidebar}}
- -

The SameSite attribute of the {{HTTPHeader("Set-Cookie")}} HTTP response header allows you to declare if your cookie should be restricted to a first-party or same-site context.

- -
-

Standards related to the Cookie SameSite attribute recently changed such that:

- - - -

This article documents the new standard. See Browser Compatibility below for information about specific versions where the behaviour changed.

-
- -

Values

- -

The SameSite attribute accepts three values:

- -

Lax

- -

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 navigating to the origin site (i.e. when following a link).

- -

This is the default cookie value if SameSite has not been explicitly specified in recent browser versions (see the "SameSite: Defaults to Lax" feature in the Browser Compatibility).

- -
-

Lax replaced None 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.

-
- -

Strict

- -

Cookies will only be sent in a first-party context and not be sent along with requests initiated by third party websites.

- -

None

- -

Cookies will be sent in all contexts, i.e in responses to both first-party and cross-origin requests.If SameSite=None is set, the cookie Secure attribute must also be set (or the cookie will be blocked).

- -

Fixing common warnings

- -

SameSite=None requires Secure

- -

Warnings like the ones below might appear in your console:

- -
Cookie “myCookie” 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".
- -

The warning appears because any cookie that requests SameSite=None but is not marked Secure will be rejected.

- -
Set-Cookie: flavor=choco; SameSite=None
- -

To fix this, you will have to add the Secure attribute to your SameSite=None cookies.

- -
Set-Cookie: flavor=choco; SameSite=None; Secure
- -

A Secure cookie is only sent to the server with an encrypted request over the HTTPS protocol. Note that insecure sites (http:) can't set cookies with the Secure directive.

- -
-

On older browser versions you might simply get a warning that the cookie will be blocked in future. For example:

- -
Cookie “myCookie” 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
-
-
- -

Cookies without SameSite default to SameSite=Lax

- -

Recent versions of modern browsers provide a more secure default for SameSite to your cookies and so the following message might appear in your console:

- -
Cookie “myCookie” has “SameSite” policy set to “Lax” because it is missing a “SameSite” attribute, and “SameSite=Lax” is the default value for this attribute.
-
- -

The warning appears because the SameSite policy for a cookie was not explicitly specified:

- -
Set-Cookie: flavor=choco
- -

You should explicitly communicate the intended SameSite policy for your cookie (rather than relying on browsers to apply SameSite=Lax automatically). This will also improve the experience across browsers as not all of them default to Lax yet.

- -
Set-Cookie: flavor=choco; SameSite=Lax
- -

Example:

- -
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]
-
- -

Specifications

- - - - - - - - - - - - - - - - - - -
SpecificationTitle
{{RFC("6265", "Set-Cookie", "4.1")}}HTTP State Management Mechanism
draft-ietf-httpbis-rfc6265bis-05Cookie Prefixes, Same-Site Cookies, and Strict Secure Cookies
- -

Browser compatibility

- -

{{Compat("http.headers.Set-Cookie", 5)}}

- -

See also

- - 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 ---- -
{{HTTPSidebar}}
- -

The User-Agent 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.

- -
-

Please read Browser detection using the user agent and why serving different Web pages or services to different browsers is usually a bad idea.

-
- - - - - - - - - - - - -
Header type{{Glossary("Request header")}}
{{Glossary("Forbidden header name")}}no
- -

Syntax

- -
User-Agent: <product> / <product-version> <comment>
-
-Common format for web browsers:
-
-User-Agent: Mozilla/<version> (<system-information>) <platform> (<platform-details>) <extensions>
-
- -

Directives

- -
-
<product>
-
A product identifier
-
<product-version>
-
A version number of the product.
-
<comment>
-
Zero or more comments containing sub product information, for example.
-
- -

Firefox UA string

- -

For more details on Firefox and Gecko based user agent strings, see the Firefox user agent string reference. The UA string of Firefox itself is broken down into four components:

- -

Mozilla/5.0 (platform; rv:geckoversion) Gecko/geckotrail Firefox/firefoxversion

- - - -

Examples

- -
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 x.y; rv:42.0) Gecko/20100101 Firefox/42.0
-
- -

Chrome UA string

- -

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".

- -

Examples

- -
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36
- -

Opera UA string

- -

The Opera browser is also based on the blink engine, which is why it almost looks the same, but adds "OPR/<version>".

- -

Examples

- -
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
- -

Safari UA string

- -

In this example, the user agent string is mobile safari version. It contains the word "Mobile".

- -

Examples

- -
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
- -

Internet Explorer UA string

- -

Examples

- -
Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0)
- -

Crawler and bot UA strings

- -

Examples

- -
Googlebot/2.1 (+http://www.google.com/bot.html)
- -

Specifications

- - - - - - - - - - - - -
SpecificationTitle
{{RFC("7231", "User-Agent", "5.5.3")}}Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content
- -

Browser compatibility

- -

{{Compat("http.headers.User-Agent")}}

- -

See also

- - 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 ---- -
-

Ein Hintergrund zu den Modulen

- -


- 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).

- -

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).

- -

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.

- -

Übersetzt mit www.DeepL.com/Translator (kostenlose Version)

-
- -

Browser support

- -

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):

- -

import

- -

{{Compat("javascript.statements.import")}}

- -

export

- -

{{Compat("javascript.statements.export")}}

- -

Introducing an example

- -

To demonstrate usage of modules, we've created a simple set of examples that you can find on GitHub. These examples demonstrate a simple set of modules that create a <canvas> element on a webpage, and then draw (and report information about) different shapes on the canvas.

- -

These are fairly trivial, but have been kept deliberately simple to demonstrate modules clearly.

- -
-

Note: If you want to download the examples and run them locally, you'll need to run them through a local web server.

-
- -

Basic example structure

- -

In our first example (see basic-modules) we have a file structure as follows:

- -
index.html
-main.js
-modules/
-    canvas.js
-    square.js
- -
-

Note: All of the examples in this guide have basically the same structure; the above should start getting pretty familiar.

-
- -

The modules directory's two modules are described below:

- - - -

Aside — .mjs versus .js

- -

Throughout this article, we've used .js extensions for our module files, but in other resources you may see the .mjs extension used instead. V8's documentation recommends this, for example. The reasons given are:

- - - -

However, we decided to keep to using .js, 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 Content-Type header that contains a JavaScript MIME type such as text/javascript. 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 .js files, but not yet for .mjs files. Servers that already serve .mjs files correctly include GitHub Pages and http-server for Node.js.

- -

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 Content-Type for .mjs 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.

- -

For learning and portability purposes, we decided to keep to .js.

- -

If you really value the clarity of using .mjs for modules versus using .js for "normal" JavaScript files, but don't want to run into the problem described above, you could always use .mjs during development and convert them to .js during your build step.

- -

It is also worth noting that:

- - - -

Exporting module features

- -

The first thing you do to get access to module features is export them. This is done using the {{JSxRef("Statements/export", "export")}} statement.

- -

The easiest way to use it is to place it in front of any items you want exported out of the module, for example:

- -
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
-  };
-}
- -

You can export functions, var, let, const, and — as we'll see later — classes. They need to be top-level items; you can't use export inside a function, for example.

- -

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:

- -
export { name, draw, reportArea, reportPerimeter };
- -

Importing features into your script

- -

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:

- -
import { name, draw, reportArea, reportPerimeter } from './modules/square.js';
- -

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 basic-modules example would be /js-examples/modules/basic-modules.

- -

However, we've written the path a bit differently — we are using the dot (.) 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.

- -

So for example:

- -
/js-examples/modules/basic-modules/modules/square.js
- -

becomes

- -
./modules/square.js
- -

You can see such lines in action in main.js.

- -
-

Note: In some module systems, you can omit the file extension and the dot (e.g. '/modules/square'). This doesn't work in native JavaScript modules.

-
- -

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 main.js, below the import lines:

- -
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);
-
- -

Applying the module to your HTML

- -

Now we just need to apply the main.js module to our HTML page. This is very similar to how we apply a regular script to a page, with a few notable differences.

- -

First of all, you need to include type="module" in the <script> element, to declare this script as a module:

- -
<script type="module" src="main.js"></script>
- -

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".

- -

You can only use import and export statements inside modules; not regular scripts.

- -
-

Note: You can also import modules into internal scripts, as long as you include type="module", for example <script type="module"> //include script here </script>.

-
- -

Other differences between modules and standard scripts

- - - -

Default exports versus named exports

- -

The functionality we've exported so far has been comprised of named exports — each item (be it a function, const, etc.) has been referred to by its name upon export, and that name has been used to refer to it on import as well.

- -

There is also a type of export called the default export — 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 ES6 In Depth: Modules by Jason Orendorff; search for "Default exports").

- -

Let's look at an example as we explain how it works. In our basic-modules square.js you can find a function called randomSquare() 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:

- -
export default randomSquare;
- -

Note the lack of curly braces.

- -

We could instead prepend export default onto the function and define it as an anonymous function, like this:

- -
export default function(ctx) {
-  ...
-}
- -

Over in our main.js file, we import the default function using this line:

- -
import randomSquare from './modules/square.js';
- -

Again, note the lack of curly braces. This is because there is only one default export allowed per module, and we know that randomSquare is it. The above line is basically shorthand for:

- -
import {default as randomSquare} from './modules/square.js';
- -
-

Note: The as syntax for renaming exported items is explained below in the Renaming imports and exports section.

-
- -

Avoiding naming conflicts

- -

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 draw(), reportArea(), 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.

- -

Fortunately there are a number of ways to get around this. We'll look at these in the following sections.

- -

Renaming imports and exports

- -

Inside your import and export statement's curly braces, you can use the keyword as along with a new feature name, to change the identifying name you will use for a feature inside the top-level module.

- -

So for example, both of the following would do the same job, albeit in a slightly different way:

- -
// inside module.js
-export {
-  function1 as newFunctionName,
-  function2 as anotherNewFunctionName
-};
-
-// inside main.js
-import { newFunctionName, anotherNewFunctionName } from './modules/module.js';
- -
// inside module.js
-export { function1, function2 };
-
-// inside main.js
-import { function1 as newFunctionName,
-         function2 as anotherNewFunctionName } from './modules/module.js';
- -

Let's look at a real example. In our renaming directory you'll see the same module system as in the previous example, except that we've added circle.js and triangle.js modules to draw and report on circles and triangles.

- -

Inside each of these modules, we've got features with the same names being exported, and therefore each has the same export statement at the bottom:

- -
export { name, draw, reportArea, reportPerimeter };
- -

When importing these into main.js, if we tried to use

- -
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';
- -

The browser would throw an error such as "SyntaxError: redeclaration of import name" (Firefox).

- -

Instead we need to rename the imports so that they are unique:

- -
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';
- -

Note that you could solve the problem in the module files instead, e.g.

- -
// in square.js
-export { name as squareName,
-         draw as drawSquare,
-         reportArea as reportSquareArea,
-         reportPerimeter as reportSquarePerimeter };
- -
// in main.js
-import { squareName, drawSquare, reportSquareArea, reportSquarePerimeter } from './modules/square.js';
- -

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.

- -

Creating a module object

- -

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:

- -
import * as Module from './modules/module.js';
- -

This grabs all the exports available inside module.js, and makes them available as members of an object Module, effectively giving it its own namespace. So for example:

- -
Module.function1()
-Module.function2()
-etc.
- -

Again, let's look at a real example. If you go to our module-objects 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:

- -
export { name, draw, reportArea, reportPerimeter };
- -

The imports on the other hand look like this:

- -
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';
- -

In each case, you can now access the module's imports underneath the specified object name, for example:

- -
let square1 = Square.draw(myCanvas.ctx, 50, 50, 100, 'blue');
-Square.reportArea(square1.length, reportList);
-Square.reportPerimeter(square1.length, reportList);
- -

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.

- -

Modules and classes

- -

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.

- -

You can see an example of our shape drawing module rewritten with ES classes in our classes directory. As an example, the square.js file now contains all its functionality in a single class:

- -
class Square {
-  constructor(ctx, listId, length, x, y, color) {
-    ...
-  }
-
-  draw() {
-    ...
-  }
-
-  ...
-}
- -

which we then export:

- -
export { Square };
- -

Over in main.js, we import it like this:

- -
import { Square } from './modules/square.js';
- -

And then use the class to draw our square:

- -
let square1 = new Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue');
-square1.draw();
-square1.reportArea();
-square1.reportPerimeter();
- -

Aggregating modules

- -

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:

- -
export * from 'x.js'
-export { name } from 'x.js'
- -

For an example, see our module-aggregation directory. In this example (based on our earlier classes example) we've got an extra module called shapes.js, which aggregates all the functionality from circle.js, square.js, and triangle.js together. We've also moved our submodules inside a subdirectory inside the modules directory called shapes. So the module structure in this example is:

- -
modules/
-  canvas.js
-  shapes.js
-  shapes/
-    circle.js
-    square.js
-    triangle.js
- -

In each of the submodules, the export is of the same form, e.g.

- -
export { Square };
- -

Next up comes the aggregation part. Inside shapes.js, we include the following lines:

- -
export { Square } from './shapes/square.js';
-export { Triangle } from './shapes/triangle.js';
-export { Circle } from './shapes/circle.js';
- -

These grab the exports from the individual submodules and effectively make them available from the shapes.js module.

- -
-

Note: The exports referenced in shapes.js 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.

-
- -

So now in the main.js file, we can get access to all three module classes by replacing

- -
import { Square } from './modules/square.js';
-import { Circle } from './modules/circle.js';
-import { Triangle } from './modules/triangle.js';
- -

with the following single line:

- -
import { Square, Circle, Triangle } from './modules/shapes.js';
- -

Dynamic module loading

- -

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.

- -

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 Creating a module object) giving you access to that object's exports, e.g.

- -
import('./modules/myModule.js')
-  .then((module) => {
-    // Do something with the module.
-  });
- -

Let's look at an example. In the dynamic-module-imports 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.

- -

In this example we've only made changes to our index.html and main.js files — the module exports remain the same as before.

- -

Over in main.js we've grabbed a reference to each button using a Document.querySelector() call, for example:

- -
let squareBtn = document.querySelector('.square');
- -

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:

- -
squareBtn.addEventListener('click', () => {
-  import('./modules/square.js').then((Module) => {
-    let square1 = new Module.Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue');
-    square1.draw();
-    square1.reportArea();
-    square1.reportPerimeter();
-  })
-});
- -

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 Module. prepended to it, e.g. Module.Square( ... ).

- -

Troubleshooting

- -

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!

- - - -

See also

- - - -

{{Previous("Web/JavaScript/Guide/Meta_programming")}}

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__ ---- -
{{JSRef}}
- -
-

This feature is deprecated in favor of defining getters using the object initializer syntax or the {{jsxref("Object.defineProperty()")}} API. While this feature is widely implemented, it is only described in the ECMAScript specification because of legacy usage. This method should not be used since better alternatives exist.

-
- -

Die __defineGetter__ Methode bindet eine Eigenschaft des Objects an eine Funktion, die aufgerufen wird, wenn das Object angesehen wird.

- -

Syntax

- -
obj.__defineGetter__(prop, func)
- -

Parameters

- -
-
prop
-
Ein String der den Namen der zur Funktion gebundenen Eigenschaft enthält
-
func
-
Eine Funktion die zur Eigenschaft gebunden wird.
-
- -

Return value

- -

{{jsxref("undefined")}}.

- -

Description

- -

Die __defineGetter__ erlaubt einen {{jsxref("Operators/get", "getter", "", 1)}} auf ein Object zu erstellen.

- -

Examples

- -
// 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
-
- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ESDraft', '#sec-object.prototype.__defineGetter__', 'Object.prototype.__defineGetter__()')}}{{Spec2('ESDraft')}}Included in the (normative) annex for additional ECMAScript legacy features for Web browsers (note that the specification codifies what is already in implementations).
- -

Browser compatibility

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatIE("11")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Compatibility notes

- - - -

See also

- - 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 ---- -
{{JSRef}}
- -

The RangeError object indicates an error when a value is not in the set or range of allowed values.

- -

Syntax

- -
new RangeError([message[, fileName[, lineNumber]]])
- -

Parameters

- -
-
message
-
Optional. Human-readable description of the error
-
fileName {{non-standard_inline}}
-
Optional. The name of the file containing the code that caused the exception
-
lineNumber {{non-standard_inline}}
-
Optional. The line number of the code that caused the exception
-
- -

Description

- -

A RangeError 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()")}}.

- -

Properties

- -
-
{{jsxref("RangeError.prototype")}}
-
Allows the addition of properties to an RangeError object.
-
- -

Methods

- -

The global RangeError contains no methods of its own, however, it does inherit some methods through the prototype chain.

- -

RangeError instances

- -

Properties

- -
{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/RangeError/prototype', 'Properties')}}
- -

Methods

- -
{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/RangeError/prototype', 'Methods')}}
- -

Examples

- -

Using RangeError

- -
var check = function(num) {
-  if (num < MIN || num > MAX) {
-    throw new RangeError('Parameter must be between ' + MIN + ' and ' + MAX);
-  }
-};
-
-try {
-  check(500);
-}
-catch (e) {
-  if (e instanceof RangeError) {
-    // Handle range error
-  }
-}
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES3')}}{{Spec2('ES3')}}Initial definition.
{{SpecName('ES5.1', '#sec-15.11.6.2', 'RangeError')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-rangeerror', 'RangeError')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-rangeerror', 'RangeError')}}{{Spec2('ESDraft')}} 
- -

Browser compatibility

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

See also

- - 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 ---- -
{{QuickLinksWithSubpages("/en-US/docs/Web/Manifest")}}
- - - - - - - - - - - - -
TypeString
MandatoryNo
- -

The short_name member is a string that represents the name of the web application displayed to the user if there is not enough space to display name (e.g., as a label for an icon on the phone home screen). short_name is directionality-capable, which means it can be displayed left-to-right or right-to-left based on the value of the dir and lang manifest members.

- -

Examples

- -

Simple short_name in left-to-right language:

- -
"name": "Awesome application",
-"short_name": "Awesome app"
- -

short_name in Arabic, which will be displayed right-to-left:

- -
"dir": "rtl",
-"lang": "ar",
-"name": "تطبيق رائع",
-"short_name": "رائع"
-
- -

Specification

- - - - - - - - - - - - - - - - - - -
SpecificationStatusCommentFeedback
-

{{SpecName('Manifest', '#short_name-member', 'short_name')}}

- 		-

{{Spec2('Manifest')}}

- 		-

Initial definition.

- 		-

Web App Manifest Working Group drafts

-
- -

Browser compatibility

- - - -

{{Compat("html.manifest.short_name")}}

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 ---- -

Dieses Dokument beschreibt die Schnittstelle zu XPath in JavaScript intern, in Erweiterungen und in Webseiten. Mozilla implementiert einen großen Teil von DOM 3 XPath, sodass XPath auf HTML- und XML-Dokumente angewendet werden kann.

- -

Die Hauptschnittstelle für die Anwendung von XPath ist die evaluate-Methode des document-Objekts.

- -

document.evaluate

- -

Diese Methode wertet  XPath Ausdrücke in Bezug auf ein XML basierendes Dokument (einschließlich HTML-Documente) aus und gibt ein XPathResult-Objekt zurück, das ein Einzelknoten oder eine Zusammenstellung mehrerer Knoten sein kann. Die vorhandene Dokumentation dieser Methode ist unter document.evaluate zu finden, sie ist jedoch für unseren jetzigen Bedarf ziemlich knapp gehalten. Eine umfangreichere Betrachtung wird nachfolgend beschrieben.

- -
var xpathResult = document.evaluate( xpathExpression, contextNode, namespaceResolver, resultType, result );
-
- -

Parameter

- -

Die evaluate Funktion nimmt insgesamt fünf Parameter entgegen:

- - - -

Rückgabewert

- -

Returns xpathResult, which is an XPathResult object of the type specified in the resultType parameter. The XPathResult Interface is defined {{ Source("dom/interfaces/xpath/nsIDOMXPathResult.idl", "here") }}.

- -

Einen Standard-Namensraumauflöser (Default Namespace Resolver) implementieren

- -

Wir erstellen einen Namensraumauflöser mit Hilfe der createNSResolver-Methode des document-Objekts.

- -
var nsResolver = document.createNSResolver( contextNode.ownerDocument == null ? contextNode.documentElement : contextNode.ownerDocument.documentElement );
-
- -

Or alternatively by using the <code>createNSResolver</code> method of a <code>XPathEvaluator</code> object. <pre> var xpEvaluator = new XPathEvaluator(); var nsResolver = xpEvaluator.createNSResolver( contextNode.ownerDocument == null ? contextNode.documentElement : contextNode.ownerDocument.documentElement ); </pre> And then pass document.evaluate, the nsResolver variable as the namespaceResolver parameter.

- -

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., p[@id='_myid'] for xmlns='http://www.w3.org/1999/xhtml'). To match default elements in a non-null namespace, you either have to refer to a particular element using a form such as ['namespace-uri()='http://www.w3.org/1999/xhtml' and name()='p' and @id='_myid'] (this approach 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 how to create a user defined namespace resolver, if you wish to take the latter approach.

- -

Anmerkungen

- -

Adapts any DOM node to resolve namespaces so that an XPath 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 lookupNamespaceURI on nodes in resolving the namespaceURI from a given prefix using the current information available in the node's hierarchy at the time lookupNamespaceURI is called. Also correctly resolves the implicit xml prefix.

- -

Festlegung des Rückgabetyps

- -

The returned variable xpathResult from document.evaluate can either be composed of individual nodes (simple types), or a collection of nodes (node-set types).

- -

Simple Types

- -

When the desired result type in resultType is specified as either:

- - - -

We obtain the returned value of the expression by accessing the following properties respectively of the XPathResult object.

- - - -
Beispiel
- -

The following uses the XPath expression count(//p) to obtain the number of <p> elements in a HTML document:

- -
var paragraphCount = document.evaluate( 'count(//p)', document, null, XPathResult.ANY_TYPE, null );
-
-alert( 'This document contains ' + paragraphCount.numberValue + ' paragraph elements' );
-
- -

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 stringValue property is requested, so the following code will not work:

- -
var paragraphCount = document.evaluate('count(//p)', document, null, XPathResult.ANY_TYPE, null );
-
-alert( 'This document contains ' + paragraphCount.stringValue + ' paragraph elements' );
-
- -

Instead it will return an exception with the code NS_DOM_TYPE_ERROR.

- -

Node-Set-Typen

- -

The XPathResult object allows node-sets to be returned in 3 principal different types:

- - - -
Iteratoren
- -

When the specified result type in the resultType parameter is either:

- - - -

The XPathResult 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 iterateNext() method of the XPathResult.

- -

Once we have iterated over all of the individual matched nodes, iterateNext() will return null.

- -

Note however, that if the document is mutated (the document tree is modified) between iterations that will invalidate the iteration and the invalidIteratorState property of XPathResult is set to true, and a NS_ERROR_DOM_INVALID_STATE_ERR exception is thrown.

- -
Iterator Example
- -
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 );
-}
-
- -
Momentabbilder (Snapshots)
- -

When the specified result type in the resultType parameter is either:

- - - -

The XPathResult object returned is a static node-set of matched nodes, which allows us to access each node through the snapshotItem(itemNumber) method of the XPathResult object, where itemNumber is the index of the node to be retrieved. The total number of nodes contained can be accessed through the snapshotLength property.

- -

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.

- -
Snapshot Example
- -
var nodesSnapshot = document.evaluate('//phoneNumber', documentNode, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null );
-
-for ( var i=0 ; i < nodesSnapshot.snapshotLength; i++ )
-{
-  dump( nodesSnapshot.snapshotItem(i).textContent );
-}
-
- -
Erster Knoten
- -

When the specified result type in the resultType parameter is either:

- - - -

The XPathResult object returned is only the first found node that matched the XPath expression. This can be accessed through the singleNodeValue property of the XPathResult object. This will be null if the node set is empty.

- -

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.

- -
First Node Example
- -
var firstPhoneNumber = document.evaluate('//phoneNumber', documentNode, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null );
-
-dump( 'The first phone number found is ' + firstPhoneNumber.singleNodeValue.textContent );
-
- -

Die Konstante ANY_TYPE

- -

When the result type in the resultType parameter is specified as ANY_TYPE, the XPathResult object returned, will be whatever type that naturally results from the evaluation of the expression.

- -

It could be any of the simple types (NUMBER_TYPE, STRING_TYPE, BOOLEAN_TYPE), but, if the returned result type is a node-set then it will only be an UNORDERED_NODE_ITERATOR_TYPE.

- -

To determine that type after evaluation, we use the resultType property of the XPathResult object. The constant values of this property are defined in the appendix. None Yet =====Any_Type Example===== <pre> </pre>

- -

Beispiele

- -

Innerhalb eines HTML-Dokuments

- -

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.

- -

To extract all the <h2> heading elements in an HTML document using XPath, the xpathExpression is simply '//h2'. Where, // is the Recursive Descent Operator that matches elements with the nodeName h2 anywhere in the document tree. The full code for this is: link to introductory xpath doc

- -
var headings = document.evaluate('//h2', document, null, XPathResult.ANY_TYPE, null );
-
- -

Notice that, since HTML does not have namespaces, we have passed null for the namespaceResolver parameter.

- -

Since we wish to search over the entire document for the headings, we have used the document object itself as the contextNode.

- -

The result of this expression is an XPathResult object. If we wish to know the type of result returned, we may evaluate the resultType property of the returned object. In this case, that will evaluate to 4, an UNORDERED_NODE_ITERATOR_TYPE. 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 iterateNext() method of the returned object:

- -
var thisHeading = headings.iterateNext();
-
-var alertText = 'Level 2 headings in this document are:\n'
-
-while (thisHeading) {
-  alertText += thisHeading.textContent + '\n';
-  thisHeading = headings.iterateNext();
-}
-
- -

Once we iterate to a node, we have access to all the standard DOM interfaces on that node. After iterating through all the h2 elements returned from our expression, any further calls to iterateNext() will return null.

- -

Auswertung an einem XML-Dokument innerhalb einer Erweiterung

- -

The following uses an XML document located at chrome://yourextension/content/peopleDB.xml as an example.

- -
<?xml version="1.0"?>
-<people xmlns:xul = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" >
-  <person>
-	<name first="george" last="bush" />
-	<address street="1600 pennsylvania avenue" city="washington" country="usa"/>
-	<phoneNumber>202-456-1111</phoneNumber>
-  </person>
-  <person>
-	<name first="tony" last="blair" />
-	<address street="10 downing street" city="london" country="uk"/>
-	<phoneNumber>020 7925 0918</phoneNumber>
-  </person>
-</people>
-
- -

To make the contents of the XML document available within the extension, we create an XMLHttpRequest object to load the document synchronously, the variable xmlDoc will contain the document as an XMLDocument object against which we can use the evaluate method

- -

JavaScript used in the extensions xul/js documents.

- -
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 );
-
- -

Anmerkung

- -

When the XPathResult object is not defined, the constants can be retreived in privileged code using Components.interfaces.nsIDOMXPathResult.ANY_TYPE (CI.nsIDOMXPathResult). Similarly, an XPathEvaluator can be created using:

- -
Components.classes["@mozilla.org/dom/xpath-evaluator;1"].createInstance(Components.interfaces.nsIDOMXPathEvaluator)
- -

Anhang

- -

Einen benutzerdefinierten Namensauflöser implementieren

- -

This is an example for illustration only. This function will need to take namespace prefixes from the xpathExpression and return the URI that corresponds to that prefix. For example, the expression:

- -
'//xhtml:td/mathml:math'
-
- -

will select all MathML expressions that are the children of (X)HTML table data cell elements.

- -

In order to associate the 'mathml:' prefix with the namespace URI 'http://www.w3.org/1998/Math/MathML' and 'xhtml:' with the URI 'http://www.w3.org/1999/xhtml' we provide a function:

- -
function nsResolver(prefix) {
-  var ns = {
-    'xhtml' : 'http://www.w3.org/1999/xhtml',
-    'mathml': 'http://www.w3.org/1998/Math/MathML'
-  };
-  return ns[prefix] || null;
-}
-
- -

Our call to document.evaluate would then looks like:

- -
document.evaluate( '//xhtml:td/mathml:math', document, nsResolver, XPathResult.ANY_TYPE, null );
-
- -

Einen Standard-Namensrauf für XML-Dokumente implementieren

- -

As noted in the Implementing a Default Namespace Resolver previously, the default resolver does not handle the default namespace for XML documents. For example with this document:

- -
<?xml version="1.0" encoding="UTF-8"?>
-<feed xmlns="http://www.w3.org/2005/Atom">
-    <entry />
-    <entry />
-    <entry />
-</feed>
-
- -

doc.evaluate('//entry', doc, nsResolver, XPathResult.ANY_TYPE, null) will return an empty set, where nsResolver is the resolver returned by createNSResolver. Passing a null resolver doesn't work any better, either.

- -

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.:

- -
function resolver() {
-    return 'http://www.w3.org/2005/Atom';
-}
-doc.evaluate('//myns:entry', doc, resolver, XPathResult.ANY_TYPE, null)
-
- -

Note that a more complex resolver will be required if the document uses multiple namespaces.

- -

An approach which might work better (and allow namespaces not to be known ahead of time) is described in the next section.

- -

Using XPath functions to reference elements with a default namespace

- -

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 [namespace-uri()='http://www.w3.org/1999/xhtml' and name()='p' and @id='_myid']. This circumvents the problem of an XPath query not being able to detect the default namespace on a regularly labeled element.

- -

Getting specifically namespaced elements and attributes regardless of prefix

- -

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.

- -

While one can adapt the approach in the above section to test for namespaced elements regardless of the prefix chosen (using local-name() in combination with namespace-uri() instead of name()), 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).

- -

For example, one might try (incorrectly) to grab an element with a namespaced attribute as follows: var xpathlink = someElements[local-name(@*)="href" and namespace-uri(@*)='http://www.w3.org/1999/xlink'];

- -

This could inadvertently grab some elements if one of its attributes existed that had a local name of "href", but it was a different attribute which had the targeted (XLink) namespace (instead of @href).

- -

In order to accurately grab elements with the XLink @href attribute (without also being confined to predefined prefixes in a namespace resolver), one could obtain them as follows:

- -
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();
-
- -

In XPathResult definierte Konstanten

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Result Type Defined ConstantValueDescription
ANY_TYPE0A 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.
NUMBER_TYPE1A result containing a single number. This is useful for example, in an XPath expression using the count() function.
STRING_TYPE2A result containing a single string.
BOOLEAN_TYPE3A result containing a single boolean value. This is useful for example, in an XPath expression using the not() function.
UNORDERED_NODE_ITERATOR_TYPE4A 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.
ORDERED_NODE_ITERATOR_TYPE5A 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.
UNORDERED_NODE_SNAPSHOT_TYPE6A 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.
ORDERED_NODE_SNAPSHOT_TYPE7A 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.
ANY_UNORDERED_NODE_TYPE8A 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.
FIRST_ORDERED_NODE_TYPE9A result node-set containing the first node in the document that matches the expression.
- -

Siehe auch

- - - -
-

Original Document Information

- - -
-- cgit v1.2.3-54-g00ecf