| Implementiert auch | -None | +Keine |
|---|---|---|
| Methoden | @@ -83,48 +83,45 @@ Ein `SVGNumberList` ist indizierbar und kann wie ein Array angesprochen werden.Normatives Dokument | SVG 1.1 (2nd Edition)SVG 1.1 (2. Ausgabe) |
| Name & Argumente | -Rückgabe | +Name & Argumente | +Rückgabetyp | Beschreibung |
|---|---|---|---|---|
- clear()
+ [`clear`](/de/docs/Web/API/SVGNumberList/clear)()
|
void |
- Löscht alle vorhandenen aktuellen Elemente aus der Liste, das Ergebnis - ist eine leere Liste. + Entfernt alle vorhandenen aktuellen Elemente aus der Liste, so dass die Liste leer ist. Ausnahmen:
|
@@ -132,51 +129,40 @@ Ein `SVGNumberList` ist indizierbar und kann wie ein Array angesprochen werden.
||
initialize(in [`SVGNumber`](/de/docs/Web/API/SVGNumber)
+ >[`initialize`](/de/docs/Web/API/SVGNumberList/initialize)(in [`SVGNumber`](/de/docs/Web/API/SVGNumber)
newItem)
|
[`SVGNumber`](/de/docs/Web/API/SVGNumber) |
- Löscht alle vorhandenen aktuellen Elemente aus der Liste und
- initialisiert die Liste neu, um das angegebene einzelne Element zu
- halten, das durch Ausnahmen:
|
||
- getItem(in unsigned long index)
+ [`getItem`](/de/docs/Web/API/SVGNumberList/getItem)(in unsigned long index)
|
[`SVGNumber`](/de/docs/Web/API/SVGNumber) |
- Gibt das angegebene Element aus der Liste zurück. Das zurückgegebene
- Element ist das Element selbst und keine Kopie. Änderungen am Element
- werden sofort in der Liste widergespiegelt. Das erste Element ist
- Nummer Ausnahmen:
|
@@ -184,7 +170,7 @@ Ein `SVGNumberList` ist indizierbar und kann wie ein Array angesprochen werden.
||
insertItemBefore(in
+ >[`insertItemBefore`](/de/docs/Web/API/SVGNumberList/insertItemBefore)(in
[`SVGNumber`](/de/docs/Web/API/SVGNumber) newItem, in unsigned
long index)
@@ -192,30 +178,19 @@ Ein `SVGNumberList` ist indizierbar und kann wie ein Array angesprochen werden.
| [`SVGNumber`](/de/docs/Web/API/SVGNumber) |
- Fügt ein neues Element an der angegebenen Position in die Liste ein.
- Das erste Element ist Nummer
- Wenn
- Wenn der Ausnahmen:
|
@@ -223,34 +198,27 @@ Ein `SVGNumberList` ist indizierbar und kann wie ein Array angesprochen werden.
||
replaceItem(in [`SVGNumber`](/de/docs/Web/API/SVGNumber)
+ >[`replaceItem`](/de/docs/Web/API/SVGNumberList/replaceItem)(in [`SVGNumber`](/de/docs/Web/API/SVGNumber)
newItem, in unsigned long index)
|
[`SVGNumber`](/de/docs/Web/API/SVGNumber) |
- Ersetzt ein vorhandenes Element in der Liste durch ein neues Element.
- Wenn Ausnahmen:
|
@@ -258,7 +226,7 @@ Ein `SVGNumberList` ist indizierbar und kann wie ein Array angesprochen werden.
||
removeItem(in unsigned long index)[`removeItem`](/de/docs/Web/API/SVGNumberList/removeItem)(in unsigned long index)
|
[`SVGNumber`](/de/docs/Web/API/SVGNumber) | @@ -267,16 +235,14 @@ Ein `SVGNumberList` ist indizierbar und kann wie ein Array angesprochen werden.|||
appendItem(in [`SVGNumber`](/de/docs/Web/API/SVGNumber)
+ >[`appendItem`](/de/docs/Web/API/SVGNumberList/appendItem)(in [`SVGNumber`](/de/docs/Web/API/SVGNumber)
newItem)
|
@@ -292,18 +258,13 @@ Ein `SVGNumberList` ist indizierbar und kann wie ein Array angesprochen werden.
Fügt ein neues Element am Ende der Liste ein. Wenn
- Ausnahmen:
|
diff --git a/files/de/web/api/svgnumberlist/initialize/index.md b/files/de/web/api/svgnumberlist/initialize/index.md
new file mode 100644
index 000000000..dbdb79698
--- /dev/null
+++ b/files/de/web/api/svgnumberlist/initialize/index.md
@@ -0,0 +1,45 @@
+---
+title: "SVGNumberList: initialize() Methode"
+short-title: initialize()
+slug: Web/API/SVGNumberList/initialize
+l10n:
+ sourceCommit: 0f57507c06180622a5a6168b552317c43eeb9d04
+---
+
+{{APIRef("SVG")}}
+
+Die `initialize()`-Methode der [`SVGNumberList`](/de/docs/Web/API/SVGNumberList)-Schnittstelle entfernt alle bestehenden aktuellen Elemente aus der Liste und initialisiert die Liste neu, um das einzelne Element zu halten, das durch den Parameter angegeben wird.
+
+Wenn das eingefügte Element bereits in einer Liste ist, wird es aus seiner vorherigen Liste entfernt, bevor es in diese Liste eingefügt wird. Das eingefügte Element ist das Element selbst und keine Kopie.
+
+## Syntax
+
+```js-nolint
+SVGNumberList.initialize(newItem)
+```
+
+### Parameter
+
+- `newItem`
+ - : Ein [`SVGNumber`](/de/docs/Web/API/SVGNumber)-Element, das in die Liste eingefügt wird.
+
+### Rückgabewert
+
+Ein [`SVGNumber`](/de/docs/Web/API/SVGNumber)-Objekt; das Element, das in die Liste eingefügt wurde.
+
+### Ausnahmen
+
+- `NoModificationAllowedError` [`DOMException`](/de/docs/Web/API/DOMException)
+ - : Wird ausgelöst, wenn [`SVGNumberList`](/de/docs/Web/API/SVGNumberList) einem schreibgeschützten Attribut entspricht oder wenn das Objekt selbst schreibgeschützt ist.
+
+## Spezifikationen
+
+{{Specifications}}
+
+## Browser-Kompatibilität
+
+{{Compat}}
+
+## Siehe auch
+
+- [`SVGNumber`](/de/docs/Web/API/SVGNumber)
diff --git a/files/de/web/api/svgnumberlist/insertitembefore/index.md b/files/de/web/api/svgnumberlist/insertitembefore/index.md
new file mode 100644
index 000000000..c66b96135
--- /dev/null
+++ b/files/de/web/api/svgnumberlist/insertitembefore/index.md
@@ -0,0 +1,55 @@
+---
+title: "SVGNumberList: insertItemBefore() Methode"
+short-title: insertItemBefore()
+slug: Web/API/SVGNumberList/insertItemBefore
+l10n:
+ sourceCommit: 0f57507c06180622a5a6168b552317c43eeb9d04
+---
+
+{{APIRef("SVG")}}
+
+Die `insertItemBefore()` Methode der [`SVGNumberList`](/de/docs/Web/API/SVGNumberList) Schnittstelle fügt ein neues Element an der angegebenen Position in die Liste ein.
+
+Das erste Element hat den Index `0`. Das eingefügte Element ist das Element selbst und keine Kopie.
+
+- Falls `newItem` bereits in einer Liste enthalten ist, wird es vor seiner Einfügung in diese Liste aus seiner vorherigen Liste entfernt.
+
+- Falls das Element bereits in dieser Liste enthalten ist, beachten Sie, dass der `index` des einzufügenden Elements vor der Entfernung des Elements liegt.
+
+- Wenn der `index` gleich `0` ist, wird das neue Element an den Anfang der Liste eingefügt.
+
+- Wenn der `index` größer oder gleich [`numberOfItems`](/de/docs/Web/API/SVGNumberList/numberOfItems) ist, wird das neue Element am Ende der Liste angehängt.
+
+## Syntax
+
+```js-nolint
+SVGNumberList.insertItemBefore(newItem, index)
+```
+
+### Parameter
+
+- `newItem`
+ - : Ein [`SVGNumber`](/de/docs/Web/API/SVGNumber) Element, das in die Liste eingefügt wird.
+- `index`
+ - : Ein Integer; der Index, an dem das neue Element als unsignierte lange Zahl eingefügt werden soll.
+
+### Rückgabewert
+
+Ein [`SVGNumber`](/de/docs/Web/API/SVGNumber) Objekt; das eingefügte Element aus der Liste.
+
+### Ausnahmen
+
+- `NoModificationAllowedError` [`DOMException`](/de/docs/Web/API/DOMException)
+ - : Wird ausgelöst, wenn [`SVGNumberList`](/de/docs/Web/API/SVGNumberList) einem schreibgeschützten Attribut entspricht oder wenn das Objekt selbst schreibgeschützt ist.
+
+## Spezifikationen
+
+{{Specifications}}
+
+## Browser-Kompatibilität
+
+{{Compat}}
+
+## Siehe auch
+
+- [`SVGNumber`](/de/docs/Web/API/SVGNumber)
diff --git a/files/de/web/api/svgnumberlist/length/index.md b/files/de/web/api/svgnumberlist/length/index.md
new file mode 100644
index 000000000..e647d2e77
--- /dev/null
+++ b/files/de/web/api/svgnumberlist/length/index.md
@@ -0,0 +1,28 @@
+---
+title: "SVGNumberList: length-Eigenschaft"
+short-title: length
+slug: Web/API/SVGNumberList/length
+l10n:
+ sourceCommit: 0f57507c06180622a5a6168b552317c43eeb9d04
+---
+
+{{APIRef("SVG")}}
+
+Die **`length`**-Eigenschaft der [`SVGNumberList`](/de/docs/Web/API/SVGNumberList)-Schnittstelle ist eine schreibgeschützte Eigenschaft und gibt die Anzahl der Elemente in der Liste an.
+
+## Wert
+
+Ein Ganzzahlwert; die Anzahl der [`SVGNumber`](/de/docs/Web/API/SVGNumber)-Objekte in der Liste als unsigned long.
+
+## Spezifikationen
+
+{{Specifications}}
+
+## Browser-Kompatibilität
+
+{{Compat}}
+
+## Siehe auch
+
+- [`SVGNumber`](/de/docs/Web/API/SVGNumber)
+- [`SVGNumberList.numberOfItems`](/de/docs/Web/API/SVGNumberList/numberOfItems) (Alias-Eigenschaft)
diff --git a/files/de/web/api/svgnumberlist/numberofitems/index.md b/files/de/web/api/svgnumberlist/numberofitems/index.md
new file mode 100644
index 000000000..de4885142
--- /dev/null
+++ b/files/de/web/api/svgnumberlist/numberofitems/index.md
@@ -0,0 +1,27 @@
+---
+title: "SVGNumberList: numberOfItems-Eigenschaft"
+short-title: numberOfItems
+slug: Web/API/SVGNumberList/numberOfItems
+l10n:
+ sourceCommit: 0f57507c06180622a5a6168b552317c43eeb9d04
+---
+
+{{APIRef("SVG")}}
+
+Die schreibgeschützte **`numberOfItems`**-Eigenschaft der [`SVGNumberList`](/de/docs/Web/API/SVGNumberList)-Schnittstelle repräsentiert die Anzahl der Elemente in der Liste.
+
+## Wert
+
+Ein Integer; die Anzahl der [`SVGNumber`](/de/docs/Web/API/SVGNumber)-Objekte in der Liste als unsignierter Long-Integer.
+
+## Spezifikationen
+
+{{Specifications}}
+
+## Browser-Kompatibilität
+
+{{Compat}}
+
+## Siehe auch
+
+- [`SVGNumber`](/de/docs/Web/API/SVGNumber)
diff --git a/files/de/web/api/svgnumberlist/removeitem/index.md b/files/de/web/api/svgnumberlist/removeitem/index.md
new file mode 100644
index 000000000..ce05bac31
--- /dev/null
+++ b/files/de/web/api/svgnumberlist/removeitem/index.md
@@ -0,0 +1,50 @@
+---
+title: "SVGNumberList: removeItem() Methode"
+short-title: removeItem()
+slug: Web/API/SVGNumberList/removeItem
+l10n:
+ sourceCommit: 0f57507c06180622a5a6168b552317c43eeb9d04
+---
+
+{{APIRef("SVG")}}
+
+Die `removeItem()`-Methode der [`SVGNumberList`](/de/docs/Web/API/SVGNumberList)-Schnittstelle entfernt ein vorhandenes Element aus der Liste.
+
+## Syntax
+
+```js-nolint
+SVGNumberList.removeItem(index)
+```
+
+### Parameter
+
+- `index`
+ - : Ein ganzzahliger Wert; der Index des zu entfernenden Elements als `unsigned long`.
+
+### Rückgabewert
+
+Ein [`SVGNumber`](/de/docs/Web/API/SVGNumber)-Objekt; das entfernte Element aus der Liste.
+
+### Ausnahmen
+
+Diese Methode kann eine [`DOMException`](/de/docs/Web/API/DOMException) der folgenden Typen auslösen:
+
+- `NoModificationAllowedError` [`DOMException`](/de/docs/Web/API/DOMException)
+
+ - : Wird ausgelöst, wenn [`SVGNumberList`](/de/docs/Web/API/SVGNumberList) einem schreibgeschützten Attribut entspricht oder wenn das Objekt selbst schreibgeschützt ist.
+
+- `IndexSizeError` [`DOMException`](/de/docs/Web/API/DOMException)
+ - : Wird ausgelöst, wenn die Indexnummer größer oder gleich [`numberOfItems`](/de/docs/Web/API/SVGNumberList/numberOfItems) ist.
+
+## Spezifikationen
+
+{{Specifications}}
+
+## Browser-Kompatibilität
+
+{{Compat}}
+
+## Siehe auch
+
+- [`SVGNumber`](/de/docs/Web/API/SVGNumber)
+- [`SVGNumberList.numberOfItems`](/de/docs/Web/API/SVGNumberList/numberOfItems)
diff --git a/files/de/web/api/svgnumberlist/replaceitem/index.md b/files/de/web/api/svgnumberlist/replaceitem/index.md
new file mode 100644
index 000000000..5b7af7b66
--- /dev/null
+++ b/files/de/web/api/svgnumberlist/replaceitem/index.md
@@ -0,0 +1,58 @@
+---
+title: "SVGNumberList: replaceItem()-Methode"
+short-title: replaceItem()
+slug: Web/API/SVGNumberList/replaceItem
+l10n:
+ sourceCommit: 0f57507c06180622a5a6168b552317c43eeb9d04
+---
+
+{{APIRef("SVG")}}
+
+Die `replaceItem()`-Methode des [`SVGNumberList`](/de/docs/Web/API/SVGNumberList)-Interfaces ersetzt ein bestehendes Element in der Liste durch ein neues Element.
+
+Das eingefügte Element ist das Element selbst und keine Kopie.
+
+- Wenn `newItem` bereits in einer Liste ist, wird es vor dem Einfügen in diese Liste aus seiner vorherigen Liste entfernt.
+
+- Wenn das Element bereits in dieser Liste ist, beachten Sie, dass der `index` des zu ersetzenden Elements vor dem Entfernen des Elements liegt.
+
+## Syntax
+
+```js-nolint
+SVGNumberList.replaceItem(newItem, index)
+```
+
+### Parameter
+
+- `newItem`
+ - : Ein [`SVGNumber`](/de/docs/Web/API/SVGNumber)-Element, das in die Liste eingefügt wird.
+- `index`
+ - : Ein Integer; der Index, an dem das neue Element das bestehende ersetzen soll, als nicht signierter Long-Wert.
+
+### Rückgabewert
+
+Ein [`SVGNumber`](/de/docs/Web/API/SVGNumber)-Objekt; das eingefügte Element aus der Liste.
+
+### Ausnahmen
+
+Diese Methode kann einen [`DOMException`](/de/docs/Web/API/DOMException) der folgenden Typen auslösen:
+
+- `NoModificationAllowedError` [`DOMException`](/de/docs/Web/API/DOMException)
+
+ - : Wird ausgelöst, wenn die [`SVGNumberList`](/de/docs/Web/API/SVGNumberList) einem schreibgeschützten Attribut entspricht oder wenn das Objekt selbst schreibgeschützt ist.
+
+- `IndexSizeError` [`DOMException`](/de/docs/Web/API/DOMException)
+ - : Wird ausgelöst, wenn die Indexnummer größer oder gleich [`numberOfItems`](/de/docs/Web/API/SVGNumberList/numberOfItems) ist.
+
+## Spezifikationen
+
+{{Specifications}}
+
+## Browser-Kompatibilität
+
+{{Compat}}
+
+## Siehe auch
+
+- [`SVGNumber`](/de/docs/Web/API/SVGNumber)
+- [`SVGNumberList.numberOfItems`](/de/docs/Web/API/SVGNumberList/numberOfItems)
diff --git a/files/de/web/api/svgpolygonelement/animatedpoints/index.md b/files/de/web/api/svgpolygonelement/animatedpoints/index.md
new file mode 100644
index 000000000..8eda31380
--- /dev/null
+++ b/files/de/web/api/svgpolygonelement/animatedpoints/index.md
@@ -0,0 +1,46 @@
+---
+title: "SVGPolygonElement: Eigenschaft animatedPoints"
+short-title: animatedPoints
+slug: Web/API/SVGPolygonElement/animatedPoints
+l10n:
+ sourceCommit: 9f9f880fa78383de963ae215204531c96715c0ea
+---
+
+{{APIRef("SVG")}}
+
+Die **`animatedPoints`** schreibgeschützte Eigenschaft des [`SVGPolygonElement`](/de/docs/Web/API/SVGPolygonElement)-Interfaces spiegelt den animierten Wert des {{SVGAttr("points")}}-Attributs des Elements wider. Wenn das {{SVGAttr("points")}}-Attribut nicht animiert wird, enthält es denselben Wert wie die `points`-Eigenschaft.
+
+## Wert
+
+Ein [`SVGPointList`](/de/docs/Web/API/SVGPointList)-Objekt.
+
+## Beispiele
+
+### Zugriff auf die `animatedPoints`-Eigenschaft
+
+```html
+
+```
+
+```js
+const polygonElement = document.getElementById("myPolygon");
+
+// Access the animatedPoints property
+console.dir(polygonElement.animatedPoints); // Output: SVGPointList object
+```
+
+## Spezifikationen
+
+{{Specifications}}
+
+## Browser-Kompatibilität
+
+{{Compat}}
diff --git a/files/de/web/api/svgpolygonelement/points/index.md b/files/de/web/api/svgpolygonelement/points/index.md
new file mode 100644
index 000000000..04db05e59
--- /dev/null
+++ b/files/de/web/api/svgpolygonelement/points/index.md
@@ -0,0 +1,40 @@
+---
+title: "SVGPolygonElement: Eigenschaft points"
+short-title: points
+slug: Web/API/SVGPolygonElement/points
+l10n:
+ sourceCommit: 9f9f880fa78383de963ae215204531c96715c0ea
+---
+
+{{APIRef("SVG")}}
+
+Die schreibgeschützte Eigenschaft **`points`** des [`SVGPolygonElement`](/de/docs/Web/API/SVGPolygonElement)-Interfaces spiegelt den Basiswert (d.h. statischen Wert) des {{SVGAttr("points")}}-Attributs des Elements wider. Änderungen über das [`SVGPointList`](/de/docs/Web/API/SVGPointList)-Objekt werden im {{SVGAttr("points")}}-Attribut widergespiegelt und umgekehrt.
+
+## Wert
+
+Ein [`SVGPointList`](/de/docs/Web/API/SVGPointList)-Objekt.
+
+## Beispiele
+
+### Zugriff auf die `points`-Eigenschaft
+
+```html
+
+```
+
+```js
+const polygonElement = document.getElementById("myPolygon");
+
+// Access the points property
+console.dir(polygonElement.points); // Output: SVGPointList object containing points (100,10), (150,50), (100,90), (50,50)
+```
+
+## Spezifikationen
+
+{{Specifications}}
+
+## Browser-Kompatibilität
+
+{{Compat}}
diff --git a/files/de/web/api/svgstopelement/offset/index.md b/files/de/web/api/svgstopelement/offset/index.md
new file mode 100644
index 000000000..3170baa67
--- /dev/null
+++ b/files/de/web/api/svgstopelement/offset/index.md
@@ -0,0 +1,46 @@
+---
+title: "SVGStopElement: offset-Eigenschaft"
+short-title: offset
+slug: Web/API/SVGStopElement/offset
+l10n:
+ sourceCommit: 045ca96d9e166aa44e0f22ad76a270ca8cdae209
+---
+
+{{APIRef("SVG")}}
+
+Die **`offset`**-Eigenschaft der [`SVGStopElement`](/de/docs/Web/API/SVGStopElement)-Schnittstelle gibt das {{SVGAttr("offset")}}-Attribut des angegebenen {{SVGElement("stop")}}-Elements wieder. Diese Eigenschaft ist nur lesbar.
+
+## Wert
+
+Ein [`SVGAnimatedNumber`](/de/docs/Web/API/SVGAnimatedNumber)-Objekt.
+
+## Beispiele
+
+### Zugriff auf die `offset`-Eigenschaft
+
+```html
+
+```
+
+```js
+const stopElement = document.querySelector("stop");
+
+// Access the offset property
+console.log(stopElement.offset.baseVal); // Output: 0
+```
+
+## Spezifikationen
+
+{{Specifications}}
+
+## Browser-Kompatibilität
+
+{{Compat}}
diff --git a/files/de/web/api/svgsymbolelement/index.md b/files/de/web/api/svgsymbolelement/index.md
index 7524092e2..b0c2dee3f 100644
--- a/files/de/web/api/svgsymbolelement/index.md
+++ b/files/de/web/api/svgsymbolelement/index.md
@@ -2,22 +2,27 @@
title: SVGSymbolElement
slug: Web/API/SVGSymbolElement
l10n:
- sourceCommit: a7dc8593894e275bb9d522168f3ae9120ce5242e
+ sourceCommit: e4dae88f147cd8a57f2e69feca9e63566662ddcc
---
{{APIRef("SVG")}}
-Die **`SVGSymbolElement`**-Schnittstelle entspricht dem {{SVGElement("symbol")}}-Element.
+Die **`SVGSymbolElement`** Schnittstelle entspricht dem {{SVGElement("symbol")}} Element.
{{InheritanceDiagram}}
## Instanz-Eigenschaften
-_Diese Schnittstelle implementiert keine speziellen Eigenschaften, sondern erbt Eigenschaften von ihrer Elternschnittstelle, [`SVGGraphicsElement`](/de/docs/Web/API/SVGGraphicsElement)._
+_Diese Schnittstelle erbt auch Eigenschaften von ihrer übergeordneten Schnittstelle, [`SVGGraphicsElement`](/de/docs/Web/API/SVGGraphicsElement)._
+
+- [`SVGSymbolElement.viewBox`](/de/docs/Web/API/SVGSymbolElement/viewBox) {{ReadOnlyInline}}
+ - : Ein [`SVGAnimatedRect`](/de/docs/Web/API/SVGAnimatedRect), das dem {{SVGAttr("viewBox")}} Attribut des gegebenen {{SVGElement("symbol")}} Elements entspricht.
+- [`SVGSymbolElement.preserveAspectRatio`](/de/docs/Web/API/SVGSymbolElement/preserveAspectRatio) {{ReadOnlyInline}}
+ - : Ein [`SVGAnimatedPreserveAspectRatio`](/de/docs/Web/API/SVGAnimatedPreserveAspectRatio), das dem {{SVGAttr("preserveAspectRatio")}} Attribut des gegebenen {{SVGElement("symbol")}} Elements entspricht.
## Instanz-Methoden
-_Diese Schnittstelle implementiert keine speziellen Methoden, sondern erbt Methoden von ihrer Elternschnittstelle, [`SVGGraphicsElement`](/de/docs/Web/API/SVGGraphicsElement)._
+_Diese Schnittstelle implementiert keine spezifischen Methoden, erbt jedoch Methoden von ihrer übergeordneten Schnittstelle, [`SVGGraphicsElement`](/de/docs/Web/API/SVGGraphicsElement)._
## Spezifikationen
diff --git a/files/de/web/api/svgsymbolelement/preserveaspectratio/index.md b/files/de/web/api/svgsymbolelement/preserveaspectratio/index.md
new file mode 100644
index 000000000..071069946
--- /dev/null
+++ b/files/de/web/api/svgsymbolelement/preserveaspectratio/index.md
@@ -0,0 +1,57 @@
+---
+title: "SVGSymbolElement: preserveAspectRatio-Eigenschaft"
+short-title: preserveAspectRatio
+slug: Web/API/SVGSymbolElement/preserveAspectRatio
+l10n:
+ sourceCommit: e4dae88f147cd8a57f2e69feca9e63566662ddcc
+---
+
+{{APIRef("SVG")}}
+
+Die schreibgeschützte **`preserveAspectRatio`**-Eigenschaft der [`SVGSymbolElement`](/de/docs/Web/API/SVGSymbolElement)-Schnittstelle spiegelt das {{SVGAttr("preserveAspectRatio")}}-Attribut des angegebenen {{SVGElement("symbol")}}-Elements wider. Sie definiert, wie der Inhalt des `symbol`-Elements skaliert werden soll, um in den verfügbaren Raum zu passen, wobei das Seitenverhältnis beibehalten wird.
+
+## Wert
+
+Ein [`SVGAnimatedPreserveAspectRatio`](/de/docs/Web/API/SVGAnimatedPreserveAspectRatio)-Objekt.
+
+## Beispiele
+
+Angenommen, wir haben folgendes SVG, können wir die `preserveAspectRatio`-Eigenschaft verwenden, um das Skalierungsverhalten für das `symbol`-Element abzurufen:
+
+```html
+
+```
+
+Wir können auf das `preserveAspectRatio`-Attribut zugreifen:
+
+```js
+const symbolElement = document.getElementById("exampleSymbol");
+
+// Access the preserveAspectRatio property
+const aspectRatio = symbolElement.preserveAspectRatio.baseVal;
+
+console.log(aspectRatio.align); // Output: 2 (xMinYMin)
+console.log(aspectRatio.meetOrSlice); // Output: 1 (meet)
+```
+
+## Spezifikationen
+
+{{Specifications}}
+
+## Browser-Kompatibilität
+
+{{Compat}}
+
+## Siehe auch
+
+- {{SVGAttr("preserveAspectRatio")}}
diff --git a/files/de/web/api/svgsymbolelement/viewbox/index.md b/files/de/web/api/svgsymbolelement/viewbox/index.md
new file mode 100644
index 000000000..851e466d5
--- /dev/null
+++ b/files/de/web/api/svgsymbolelement/viewbox/index.md
@@ -0,0 +1,54 @@
+---
+title: "SVGSymbolElement: viewBox-Eigenschaft"
+short-title: viewBox
+slug: Web/API/SVGSymbolElement/viewBox
+l10n:
+ sourceCommit: e4dae88f147cd8a57f2e69feca9e63566662ddcc
+---
+
+{{APIRef("SVG")}}
+
+Die **`viewBox`**-Eigenschaft der [`SVGSymbolElement`](/de/docs/Web/API/SVGSymbolElement)-Schnittstelle ist eine schreibgeschützte Eigenschaft, die das {{SVGAttr("viewBox")}}-Attribut des angegebenen {{SVGElement("symbol")}}-Elements widerspiegelt.
+
+## Wert
+
+Ein [`SVGAnimatedRect`](/de/docs/Web/API/SVGAnimatedRect)-Objekt.
+
+## Beispiele
+
+### Zugriff auf die `viewBox`-Eigenschaft
+
+```html
+
+```
+
+```js
+const symbolElement = document.getElementById("exampleSymbol");
+
+// Access the viewBox property
+const viewBox = symbolElement.viewBox.baseVal;
+
+console.log(viewBox.x); // Output: 0
+console.log(viewBox.y); // Output: 0
+console.log(viewBox.width); // Output: 100
+console.log(viewBox.height); // Output: 100
+```
+
+## Spezifikationen
+
+{{Specifications}}
+
+## Browser-Kompatibilität
+
+{{Compat}}
+
+## Siehe auch
+
+- {{SVGAttr("viewBox")}}
diff --git a/files/de/web/css/css_media_queries/using_media_queries/index.md b/files/de/web/css/css_media_queries/using_media_queries/index.md
index 1129d637f..3cb3d65fa 100644
--- a/files/de/web/css/css_media_queries/using_media_queries/index.md
+++ b/files/de/web/css/css_media_queries/using_media_queries/index.md
@@ -2,32 +2,32 @@
title: Verwendung von Media Queries
slug: Web/CSS/CSS_media_queries/Using_media_queries
l10n:
- sourceCommit: b60bc79c7ad36c56dddf6760d2fd4dbb642d2023
+ sourceCommit: 53930e7004d7cd5cb475bfadfc0450f88853d8ea
---
{{CSSRef}}
-**Media Queries** ermöglichen es Ihnen, CSS-Stile abhängig vom Medientyp eines Geräts (wie z.B. Druck vs. Bildschirm) oder anderen Merkmalen oder Eigenschaften wie Bildschirmauflösung oder -ausrichtung, {{Glossary("aspect_ratio", "Seitenverhältnis")}}, Browser-{{Glossary("viewport", "Viewport")}}-Breite oder -Höhe, Benutzerpräferenzen wie der Präferenz für reduzierte Bewegung, Datennutzung oder Transparenz anzuwenden.
+**Media Queries** ermöglichen es Ihnen, CSS-Stile abhängig vom Medientyp eines Geräts (z.B. Druck vs. Bildschirm) oder von anderen Funktionen oder Merkmalen wie Bildschirmauflösung oder -ausrichtung, {{Glossary("aspect_ratio", "Seitenverhältnis")}}, Browser-{{Glossary("viewport", "Viewport")}}-Breite oder -Höhe, Benutzerpräferenzen wie bevorzugte reduzierte Bewegungen, Datennutzung oder Transparenz anzuwenden.
-Media Queries werden für Folgendes verwendet:
+Media Queries werden verwendet für:
-- Um Stile bedingt mit den [CSS](/de/docs/Web/CSS) {{cssxref("@media")}} und {{cssxref("@import")}} [At-Regeln](/de/docs/Web/CSS/At-rule) anzuwenden.
-- Um bestimmte Medien für die {{HTMLElement("style")}}, {{HTMLElement("link")}}, {{HTMLElement("source")}} und andere [HTML](/de/docs/Web/HTML) Elemente mit den Attributen `media=` oder `sizes="` zu tarieren.
-- Um [Medienzustände zu testen und zu überwachen](/de/docs/Web/CSS/CSS_media_queries/Testing_media_queries) mithilfe der Methoden [`Window.matchMedia()`](/de/docs/Web/API/Window/matchMedia) und [`EventTarget.addEventListener()`](/de/docs/Web/API/EventTarget/addEventListener).
+- Bedingtes Anwenden von Stilen mit den [CSS](/de/docs/Web/CSS) {{cssxref("@media")}} und {{cssxref("@import")}} [At-Regeln](/de/docs/Web/CSS/At-rule).
+- Das gezielte Ansprechen bestimmter Medien für die {{HTMLElement("style")}}, {{HTMLElement("link")}}, {{HTMLElement("source")}} und andere [HTML](/de/docs/Web/HTML)-Elemente mit den Attributen `media=` oder `sizes="`.
+- [Testen und Überwachen von Medienzuständen](/de/docs/Web/CSS/CSS_media_queries/Testing_media_queries) mit den Methoden [`Window.matchMedia()`](/de/docs/Web/API/Window/matchMedia) und [`EventTarget.addEventListener()`](/de/docs/Web/API/EventTarget/addEventListener).
> [!NOTE]
-> Die Beispiele auf dieser Seite verwenden CSS's `@media` zu Illustrationszwecken, aber die grundlegende Syntax bleibt für alle Arten von Media Queries gleich.
+> Die Beispiele auf dieser Seite verwenden CSS's `@media` zu Illustrationszwecken, aber die grundlegende Syntax bleibt für alle Arten von Media Queries dieselbe.
## Syntax
Ein Media Query besteht aus einem optionalen _Medientyp_ und einer beliebigen Anzahl von _Media-Feature_-Ausdrücken, die optional auf verschiedene Weise mit _logischen Operatoren_ kombiniert werden können.
-Media Queries sind nicht case-sensitiv.
+Media Queries sind nicht groß- und kleinschreibungssensitiv.
-- [Medientypen](/de/docs/Web/CSS/@media#media_types) definieren die allgemeine Kategorie des Geräts, für das das Media Query gilt: `all`, `print`, `screen`.
+- [Medientypen](/de/docs/Web/CSS/@media#media_types) definieren die breite Kategorie des Geräts, für das der Media Query gilt: `all`, `print`, `screen`.
- Der Typ ist optional (wird standardmäßig `all` angenommen) außer bei Verwendung des logischen Operators `only`.
+ Der Typ ist optional (angenommen wird `all`), es sei denn, es wird der logische Operator `only` verwendet.
-- [Media-Features](/de/docs/Web/CSS/@media#media_features) beschreiben ein spezifisches Merkmal des {{Glossary("user_agent", "User-Agents")}}, des Ausgabegeräts oder der Umgebung:
+- [Media-Features](/de/docs/Web/CSS/@media#media_features) beschreiben ein spezifisches Merkmal des {{Glossary("user_agent", "User Agents")}}, des Ausgabegeräts oder der Umgebung:
- {{cssxref("@media/any-hover", "any-hover")}}
- {{cssxref("@media/any-pointer", "any-pointer")}}
@@ -60,25 +60,25 @@ Media Queries sind nicht case-sensitiv.
- {{cssxref("@media/video-dynamic-range", "video-dynamic-range")}}
- {{cssxref("@media/width", "width")}}.
- Beispielsweise ermöglicht die {{cssxref("@media/hover", "hover")}}-Funktion eine Abfrage, um zu überprüfen, ob das Gerät das Hovering über Elementen unterstützt.
- Media-Feature-Ausdrücke testen auf deren Vorhandensein oder Wert und sind völlig optional.
- Jedes Media-Feature-Ausdruck muss in Klammern gesetzt werden.
+ Zum Beispiel ermöglicht das {{cssxref("@media/hover", "hover")}}-Feature eine Abfrage, ob das Gerät das Hovering über Elemente unterstützt.
+ Media Feature Ausdrücke testen auf deren Vorhandensein oder Wert und sind vollständig optional.
+ Jeder Media Feature Ausdruck muss von Klammern umgeben sein.
-- [Logische Operatoren](/de/docs/Web/CSS/@media#logical_operators) können verwendet werden, um eine komplexe Media Query zu komponieren: `not`, `and`, und `only`.
- Sie können auch mehrere Media Queries zu einer einzigen Regel kombinieren, indem Sie sie mit Kommata trennen.
+- [Logische Operatoren](/de/docs/Web/CSS/@media#logical_operators) können verwendet werden, um eine komplexe Media Query zu erstellen: `not`, `and` und `only`.
+ Sie können auch mehrere Media Queries zu einer einzigen Regel kombinieren, indem Sie sie mit Kommas trennen.
-Eine Media Query ergibt `true`, wenn der Medientyp (falls angegeben) mit dem Gerät übereinstimmt, auf dem ein Dokument angezeigt wird _und_ alle Media-Feature-Ausdrücke als wahr berechnet werden.
-Abfragen mit unbekannten Medientypen sind immer falsch.
+Ein Media Query ergibt `true`, wenn der Medientyp (falls angegeben) mit dem Gerät übereinstimmt, auf dem ein Dokument angezeigt wird, und alle Media-Feature-Ausdrücke als true berechnet werden.
+Anfragen mit unbekannten Medientypen sind immer false.
> [!NOTE]
-> Ein mit einer Media Query verbundenes Stylesheet im {{HTMLElement("link")}}-Tag [wird trotzdem heruntergeladen](https://scottjehl.github.io/CSS-Download-Tests/), selbst wenn die Abfrage `false` ergibt, der Download erfolgt, aber die Priorität des Downloads ist wesentlich niedriger.
-> Dennoch wird der Inhalt nicht angewendet, es sei denn, das Ergebnis der Abfrage wird `true`.
-> Sie können in Tomayacs Blog nachlesen, warum dies passiert: [Why Browser Download Stylesheet with Non-Matching Media Queries](https://medium.com/@tomayac/why-browsers-download-stylesheets-with-non-matching-media-queries-eb61b91b85a2).
+> Ein Stylesheet mit einem an seinen {{HTMLElement("link")}}-Tag angehängten Media Query wird [noch heruntergeladen](https://scottjehl.github.io/CSS-Download-Tests/), selbst wenn die Abfrage `false` ergibt, der Download geschieht, aber die Priorität des Herunterladens wird viel geringer sein.
+> Dennoch werden die Inhalte erst angewendet, wenn das Ergebnis der Abfrage `true` wird.
+> Sie können in Tomayacs Blog darüber lesen, warum dies geschieht: [Why Browser Download Stylesheet with Non-Matching Media Queries](https://medium.com/@tomayac/why-browsers-download-stylesheets-with-non-matching-media-queries-eb61b91b85a2).
-## Zielorientierung von Medientypen
+## Ansprechen von Medientypen
Medientypen beschreiben die allgemeine Kategorie eines bestimmten Geräts.
-Obwohl Websites häufig mit Bildschirmen im Hinterkopf gestaltet werden, möchten Sie möglicherweise Stile erstellen, die auf spezielle Geräte wie Drucker oder audio-basierte Screenreader abzielen.
+Obwohl Websites häufig mit Bildschirmen im Sinn entworfen werden, möchten Sie möglicherweise Stile erstellen, die auf spezielle Geräte wie Drucker oder audio-basierte Screenreader abzielen.
Zum Beispiel zielt dieses CSS auf Drucker ab:
```css
@@ -87,8 +87,8 @@ Zum Beispiel zielt dieses CSS auf Drucker ab:
}
```
-Sie können auch mehrere Geräte anvisieren.
-Zum Beispiel verwendet diese `@media`-Regel zwei Media Queries, um sowohl Bildschirm- als auch Druckgeräte anzuvisieren:
+Sie können auch mehrere Geräte ansprechen.
+Zum Beispiel verwendet diese `@media`-Regel zwei Media Queries, um sowohl Bildschirm- als auch Druckgeräte anzusprechen:
```css
@media screen, print {
@@ -96,14 +96,14 @@ Zum Beispiel verwendet diese `@media`-Regel zwei Media Queries, um sowohl Bildsc
}
```
-Siehe [Medientypen](/de/docs/Web/CSS/@media#media_types) für die Liste der verfügbaren Medientypen.
-Da Medientypen Geräte in sehr allgemeinen Begriffen beschreiben, wurden die meisten ursprünglich definierten Medientypen veraltet, wobei nur `screen`, `print` und `all` erhalten bleiben. Um spezifischere Attribute zu zielen, verwenden Sie stattdessen _Media Features_.
+Sehen Sie sich [Medientypen](/de/docs/Web/CSS/@media#media_types) für die Liste der verfügbaren Medientypen an.
+Da Medientypen Geräte in sehr allgemeinen Begriffen beschreiben, wurden die meisten ursprünglich definierten Medientypen als veraltet erklärt, wobei nur `screen`, `print` und `all` verbleiben. Um spezifischere Attribute anzusprechen, verwenden Sie stattdessen _Media Features_.
-## Zielorientierung von Media-Features
+## Ansprechen von Media Features
-Media-Features beschreiben die spezifischen Merkmale eines bestimmten {{Glossary("user_agent", "User-Agents")}}, Ausgabegeräts oder Umgebung.
-Zum Beispiel können Sie spezifische Stile für Breitbildmonitore, Computer, die Mäuse verwenden, oder Geräte, die unter schlechten Lichtbedingungen verwendet werden, anwenden.
-Dieses Beispiel wendet Stile an, wenn der _primäre_ Eingabemechanismus des Benutzers (wie eine Maus) über Elemente schweben kann:
+Media Features beschreiben die spezifischen Merkmale eines bestimmten {{Glossary("user_agent", "User Agents")}}, Ausgabegeräts oder der Umgebung.
+Zum Beispiel können Sie spezifische Stile auf Breitbildmonitore, Computer, die Mäuse verwenden, oder Geräte anwenden, die in schwach beleuchteten Bedingungen verwendet werden.
+In diesem Beispiel werden Stile angewendet, wenn der _primäre_ Eingabemechanismus des Benutzers (wie eine Maus) über Elemente schweben kann:
```css
@media (hover: hover) {
@@ -111,9 +111,9 @@ Dieses Beispiel wendet Stile an, wenn der _primäre_ Eingabemechanismus des Benu
}
```
-Media-Features sind entweder Bereiche oder diskret.
+Media Features sind entweder Bereichs- oder diskret.
-_Diskrete Features_ beziehen ihren Wert aus einem {{Glossary("enumerated", "aufgezählten")}} Satz möglicher Schlüsselwortwerte. Zum Beispiel akzeptiert das diskrete `orientation`-Feature entweder `landscape` oder `portrait`.
+_Diskrete Features_ nehmen ihre Werte aus einer {{Glossary("enumerated", "aufgezählten")}} Menge möglicher Schlüsselwortwerte. Zum Beispiel akzeptiert das diskrete `orientation`-Feature entweder `landscape` oder `portrait`.
```css
@media print and (orientation: portrait) {
@@ -121,8 +121,8 @@ _Diskrete Features_ beziehen ihren Wert aus einem {{Glossary("enumerated", "aufg
}
```
-Viele _Bereichs-Features_ können mit "min-" oder "max-" vorangestellt werden, um "Mindestbedingung" oder "Höchstbedingung" Einschränkungen auszudrücken.
-Zum Beispiel wird dieses CSS Stile nur anwenden, wenn die {{Glossary("viewport", "Viewport")}}-Breite Ihres Browsers gleich oder kleiner als 1250px ist:
+Viele _Bereichs-Features_ können mit "min-" oder "max-" vorangestellt werden, um Einschränkungen für "minimale Bedingung" oder "maximale Bedingung" auszudrücken.
+Zum Beispiel wird dieses CSS nur dann Stile anwenden, wenn die {{Glossary("viewport", "Viewport")}}-Breite Ihres Browsers gleich oder schmaler als 1250px ist:
```css
@media (max-width: 1250px) {
@@ -130,17 +130,21 @@ Zum Beispiel wird dieses CSS Stile nur anwenden, wenn die {{Glossary("viewport",
}
```
-Dies kann auch so geschrieben werden:
+Die folgenden Media Queries sind äquivalent zu dem obigen Beispiel:
```css
@media (width <= 1250px) {
/* … */
}
+
+@media (1250px >= width) {
+ /* … */
+}
```
-Mit Media Query-Bereichs-Features können Sie entweder die inklusiven Präfixe `min-` und `max-` oder die knapperen Bereichs-Syntaxoperatoren `<=` und `=>` verwenden.
+Mit den Range-Features der Media Queries können Sie entweder die inklusiven `min-` und `max-` Präfixe oder die prägnanteren Bereichssyntaxoperatoren `<=` und `>=` verwenden.
-Die folgenden Media Queries sind äquivalent:
+Die folgenden Media Queries sind gleichwertig:
```css
@media (min-width: 30em) and (max-width: 50em) {
@@ -150,17 +154,25 @@ Die folgenden Media Queries sind äquivalent:
@media (30em <= width <= 50em) {
/* … */
}
+
+@media (50em >= width >= 30em) {
+ /* … */
+}
```
-Die obigen Bereichsvergleiche sind inklusiv. Um den Vergleichswert nicht einzuschließen, verwenden Sie `<` und `>`.
+Die Bereichsvergleiche oben sind einschließlich. Um den Vergleichswert auszuschließen, verwenden Sie `<` und/oder `>`.
```css
@media (30em < width < 50em) {
/* … */
}
+
+@media (50em > width > 30em) {
+ /* … */
+}
```
-Wenn Sie eine Media-Feature-Abfrage ohne Angabe eines Wertes erstellen, werden die verschachtelten Stile verwendet, solange der Wert des Features nicht 0 oder `none` ist.
+Wenn Sie eine Media Feature Abfrage ohne Angabe eines Wertes erstellen, werden die verschachtelten Stile verwendet, solange der Wert des Features nicht `0` oder `none` ist.
Zum Beispiel wird dieses CSS auf jedes Gerät mit einem Farbbildschirm angewendet:
```css
@@ -169,27 +181,29 @@ Zum Beispiel wird dieses CSS auf jedes Gerät mit einem Farbbildschirm angewende
}
```
-Wenn ein Feature nicht auf das Gerät zutrifft, auf dem der Browser ausgeführt wird, sind Ausdrücke, die dieses Media Feature beinhalten, immer falsch.
+Wenn ein Feature nicht auf das Gerät zutrifft, auf dem der Browser ausgeführt wird, sind Ausdrücke, die dieses Media Feature betreffen, immer false.
-Für weitere [Media Feature-](/de/docs/Web/CSS/@media#media_features) Beispiele sehen Sie bitte die Referenzseite für jedes spezifische Feature.
+Für weitere [Media Feature](/de/docs/Web/CSS/@media#media_features)-Beispiele siehe bitte die Referenzseite für jedes spezifische Feature.
-## Erstellen komplexer Media Queries
+## Erstellen von komplexen Media Queries
-Manchmal möchten Sie möglicherweise eine Media Query erstellen, die von mehreren Bedingungen abhängt. Hier kommen die _logischen Operatoren_ ins Spiel: `not`, `and`, und `only`.
-Darüber hinaus können Sie mehrere Media Queries zu einer _kommagetrennten Liste_ kombinieren; dies ermöglicht es Ihnen, die gleichen Stile in verschiedenen Situationen anzuwenden.
+Manchmal möchten Sie eine Media Query erstellen, die von mehreren Bedingungen abhängt. Hier kommen die _logischen Operatoren_ ins Spiel: `not`, `and` und `only`.
+Darüber hinaus können Sie mehrere Media Queries zu einer durch Kommas getrennten Liste kombinieren; dies ermöglicht es Ihnen, dieselben Stile in verschiedenen Situationen anzuwenden, wobei die enthaltenen Media Queries als logische `or`-Komposition ausgewertet werden: interpretiert, als ob jede Media Query in Klammern mit einem `or` dazwischen wäre.
-Im vorherigen Beispiel haben wir gesehen, wie der Operator `and` verwendet wird, um einen Media _Typ_ mit einem Media _Feature_ zu gruppieren.
-Der `and`-Operator kann auch mehrere Media Features zu einer einzigen Media Query kombinieren. Der Operator `not` negiert hingegen eine Media Query, indem er im Wesentlichen deren normale Bedeutung umkehrt.
-Der Operator `only` verhindert, dass ältere Browser die Stile anwenden.
+Im vorherigen Beispiel haben wir den `and`-Operator verwendet, um einen Media _Typ_ mit einem Media _Feature_ zu gruppieren.
+Der `and`-Operator kann auch verwendet werden, um mehrere Media Features innerhalb einer einzelnen Media Query zu kombinieren.
+Der `not`-Operator negiert eine Media Query oder ein Media Feature, wenn es mit Klammern verwendet wird, und kehrt im Grunde deren normale Bedeutungen um.
+Der `or`-Operator kann, unter bestimmten Bedingungen, verwendet werden, um mehrere Media Features innerhalb einer einzigen Media Query zu kombinieren.
+Schließlich wurde der `only`-Operator verwendet, um zu verhindern, dass ältere Browser die Stile ohne Auswertung der Media Feature Ausdrücke anwenden, aber er hat keine Wirkung in modernen Browsern.
> [!NOTE]
-> In den meisten Fällen wird der Media-Typ `all` standardmäßig verwendet, wenn kein anderer Typ angegeben ist.
-> Wenn Sie jedoch den `only`-Operator verwenden, müssen Sie explizit einen Medientyp angeben. Sie können `only screen` oder `only print` in seiner Gesamtheit sehen.
+> In den meisten Fällen wird der Medientyp `all` standardmäßig verwendet, wenn kein anderer Typ spezifiziert ist.
+> Wenn Sie jedoch den `only`-Operator verwenden, müssen Sie ausdrücklich einen Medientyp angeben. Sie können `only screen` oder `only print` als Ganzes sehen.
### Kombinieren mehrerer Typen oder Features
Das Schlüsselwort `and` kombiniert ein Media Feature mit einem Medientyp _oder_ anderen Media Features.
-Dieses Beispiel kombiniert zwei Media Features, um Stile auf Geräte mit landschaftsorientierten Ausrichtungen und einer Breite von mindestens 30 em zu beschränken:
+Dieses Beispiel kombiniert zwei Media Features, um Stile auf Geräte im Querformat mit einer Breite von mindestens 30 ems zu beschränken:
```css
@media (min-width: 30em) and (orientation: landscape) {
@@ -197,7 +211,7 @@ Dieses Beispiel kombiniert zwei Media Features, um Stile auf Geräte mit landsch
}
```
-Um die Stile auf Geräte mit einem Bildschirm zu beschränken, können Sie die Media Features an den `screen`-Medientyp anhängen:
+Um die Stile auf Geräte mit einem Bildschirm zu beschränken, können Sie die Media Features mit dem Medientyp `screen` verknüpfen:
```css
@media screen and (min-width: 30em) and (orientation: landscape) {
@@ -205,11 +219,11 @@ Um die Stile auf Geräte mit einem Bildschirm zu beschränken, können Sie die M
}
```
-### Testen mehrerer Abfragen
+### Testen für mehrere Anfragen
-Sie können eine kommagetrennte Liste von Media Queries verwenden, um Stile anzuwenden, wenn das Gerät des Benutzers mit einem der verschiedenen Medientypen, Features oder Zustände übereinstimmt.
+Sie können eine durch Kommas getrennte Liste von Media Queries verwenden, um Stile anzuwenden, wenn das Gerät des Benutzers mit einem der verschiedenen Medientypen, Merkmale oder Zustände übereinstimmt.
-Die folgende Regel enthält zwei Media Queries. Die Stile des Blocks werden angewendet, wenn entweder das Gerät des Benutzers eine Höhe von 680px oder mehr hat _oder_ wenn das Browser-Viewport sich im Portraitmodus befindet (die Höhe des Viewports ist größer als die Breite des Viewports):
+Die folgende Regel enthält zwei Media Queries. Die Stile des Blocks werden angewendet, wenn entweder das Gerät des Benutzers eine Höhe von 680px oder mehr hat _oder_ wenn der Browser-Viewport im Hochformat ist (die Viewport-Höhe ist größer als die Viewport-Breite):
```css
@media (min-height: 680px), screen and (orientation: portrait) {
@@ -217,14 +231,14 @@ Die folgende Regel enthält zwei Media Queries. Die Stile des Blocks werden ange
}
```
-In diesem Beispiel wird die Media Query `true`, wenn der Benutzer auf ein PDF druckt und die Seitenhöhe 800px beträgt, weil die erste Abfragekomponente - die testet, ob das Viewport eine Höhe von `680px` oder mehr hat - wahr ist.
-Ebenso, wenn ein Benutzer auf einem Smartphone im Portraitmodus mit einem Viewport von 480px ist, wird die Media Query `true`, weil die zweite Abfragekomponente wahr ist.
+In diesem Beispiel, wenn der Benutzer in eine PDF druckt und die Seitenhöhe 800px beträgt, gibt die Media Query true zurück, weil die erste Abfragekomponente — die testet, ob der Viewport eine Höhe von `680px` oder mehr hat — wahr ist.
+Ebenso, wenn ein Benutzer auf einem Smartphone im Hochformat mit einer Viewport-Höhe von 480px ist, gibt die Media Query true zurück, weil die zweite Abfragekomponente wahr ist.
-In einer kommagetrennten Liste von Media Queries enden die einzelnen Media Queries am Komma oder im Fall der letzten Media Query in der Liste am öffnenden Klammer (`{`).
+In einer durch Kommas getrennten Liste von Media Queries enden die einzelnen Media Queries am Komma oder, im Fall der letzten Media Query in der Liste, an der öffnenden Klammer (`{`).
-### Invertieren der Bedeutung einer Abfrage
+### Bedeutung einer Anfrage umkehren
-Das Schlüsselwort `not` hebt die Bedeutung einer einzelnen Media Query auf. Zum Beispiel werden die CSS-Stile in dieser Media Query auf alles angewendet, _außer_ auf gedruckte Medien:
+Das Schlüsselwort `not` kehrt die Bedeutung einer einzelnen Media Query um. Zum Beispiel werden die CSS-Stile in dieser Media Query auf alles _außer_ auf gedruckte Medien angewendet:
```css
@media not print {
@@ -232,7 +246,7 @@ Das Schlüsselwort `not` hebt die Bedeutung einer einzelnen Media Query auf. Zum
}
```
-Das `not` negiert nur die Media Query, auf die es angewendet wird. Das `not` ohne Klammern negiert alle Features innerhalb der Media Query, in der es enthalten ist. Das bedeutet, dass in einer kommagetrennten Liste von Media Queries jedes `not` auf die einzelne Abfrage, in der es enthalten ist, angewendet wird und sich auf _alle_ Features innerhalb dieser einzelnen Abfrage auswirkt. In diesem Beispiel wird das `not` auf die erste Media Query angewendet, die am ersten Komma endet:
+Das `not` negiert nur die Media Query, auf die es angewendet wird. Das `not`, ohne Klammern, negiert alle Features innerhalb der Media Query, in der es enthalten ist. Das bedeutet, dass in einer durch Kommas getrennten Liste von Media Queries jedes `not` auf die einzige Abfrage angewendet wird, in der es enthalten ist, und auf _alle_ Features innerhalb dieser einzigen Abfrage. In diesem Beispiel wird das `not` auf die erste Media Query angewendet, die am ersten Komma endet:
```css
@media not screen and (color), print and (color) {
@@ -248,9 +262,9 @@ Die obige Abfrage wird so ausgewertet:
}
```
-Beide Beispiele sind gültig. Medienbedingungen können gruppiert werden, indem sie in Klammern (`()`) gesetzt werden. Diese Gruppen können dann innerhalb einer Bedingung wie eine einzelne Media Query verschachtelt werden.
+Beide Beispiele sind gültig. Medienbedingungen können gruppiert werden, indem sie in Klammern (`()`) eingeschlossen werden. Diese Gruppen können dann innerhalb einer Bedingung wie eine einzige Media Query verschachtelt werden.
-Das `not` wird zuletzt in einer Media Query ausgewertet, was bedeutet, dass es auf die gesamte Media Query angewendet wird, nicht auf ein einzelnes Feature innerhalb einer Query, so als ob direkt nach dem `not` eine offene Klammer hinzugefügt und am Ende der Media Query geschlossen werden würde.
+Das `not` wird als letztes in einer Media Query ausgewertet, was bedeutet, dass es auf die gesamte Media Query angewendet wird, nicht auf ein einzelnes Feature innerhalb einer Abfrage, als ob nach dem `not` sofort eine öffnende Klammer hinzugefügt und am Ende der Media Query geschlossen würde.
Die folgende Abfrage:
@@ -268,7 +282,7 @@ wird so ausgewertet:
}
```
-Sie wird nicht so ausgewertet:
+Sie wird nicht wie folgt ausgewertet:
```css example-bad
@media (not all) and (monochrome) {
@@ -276,9 +290,9 @@ Sie wird nicht so ausgewertet:
}
```
-Um ein einzelnes Feature innerhalb einer Media Query zu negieren, verwenden Sie Klammern. Das Umschließen eines `not` und eines Media Features in Klammern begrenzt die Komponenten der Abfrage, die negiert werden.
+Um ein einzelnes Feature innerhalb einer Media Query zu negieren, verwenden Sie Klammern. Die Ummantelung eines `not` und eines Media Features in Klammern begrenzt die Komponenten der Abfrage, die negiert werden.
-In diesem Beispiel negieren wir das `hover`-Media Feature, jedoch nicht den Medientyp `all`:
+In diesem Beispiel negieren wir das `hover` Media Feature, aber nicht den `all` Medientyp:
```css
@media all and (not(hover)) {
@@ -286,12 +300,12 @@ In diesem Beispiel negieren wir das `hover`-Media Feature, jedoch nicht den Medi
}
```
-Der `not(hover)` passt, wenn das Gerät keine Hover-Fähigkeit hat. In diesem Fall bezieht sich das `not` aufgrund der Klammern auf `hover`, jedoch nicht auf `all`.
+Das `not(hover)` trifft zu, wenn das Gerät keine Hover-Fähigkeit hat. In diesem Fall, wegen der Klammern, bezieht sich das `not` auf `hover`, aber nicht auf `all`.
### Verbesserung der Kompatibilität mit älteren Browsern
-Das Schlüsselwort `only` verhindert, dass ältere Browser, die keine Media Queries mit Media Features unterstützen, die gegebenen Stile anwenden.
-_Es hat keinen Effekt auf moderne Browser._
+Das Schlüsselwort `only` verhindert, dass ältere Browser, die Media Queries mit Media Features nicht unterstützen, die gegebenen Stile anwenden.
+_Es hat keine Wirkung auf moderne Browser._
```css
@media only screen and (color) {
@@ -299,10 +313,10 @@ _Es hat keinen Effekt auf moderne Browser._
}
```
-### Testen mehrerer Features mit `or`
+### Testen für mehrere Features mit `or`
-Sie können `or` verwenden, um nach Übereinstimmungen unter mehr als einem Feature zu testen, wobei es auf `true` auflöst, wenn eines der Features wahr ist.
-Zum Beispiel testet die folgende Abfrage auf Geräte mit monochromem Display oder Hover-Fähigkeit:
+Sie können `or` verwenden, um nach einer Übereinstimmung unter mehr als einem Feature zu suchen, wobei `true` aufgelöst wird, wenn eines der Features wahr ist.
+Zum Beispiel testet die folgende Abfrage Geräte, die ein monochromes Display oder eine Hover-Fähigkeit haben:
```css
@media (not (color)) or (hover) {
@@ -310,11 +324,26 @@ Zum Beispiel testet die folgende Abfrage auf Geräte mit monochromem Display ode
}
```
+Beachten Sie, dass Sie den `or`-Operator nicht auf der gleichen Ebene wie die `and` und `not`-Operatoren verwenden können. Sie können entweder die Media Features mit einem Komma trennen oder Klammern verwenden, um Unterausdrücke von Media Features zu gruppieren, um die Auswertungsreihenfolge zu klären.
+
+Zum Beispiel sind die folgenden Anfragen beide gültig:
+
+```css
+@media ((color) and (hover)) or (monochrome) {
+ /* … */
+}
+
+/* or */
+@media (color) and (hover), (monochrome) {
+ /* … */
+}
+```
+
## Siehe auch
- [@media](/de/docs/Web/CSS/@media)
- [Container Queries](/de/docs/Web/CSS/CSS_containment/Container_queries)
-- [Testing media queries programmatically](/de/docs/Web/CSS/CSS_media_queries/Testing_media_queries)
-- [CSS Animations Between Media Queries](https://davidwalsh.name/animate-media-queries)
-- [Erweiterte Mozilla-Media-Features](/de/docs/Web/CSS/Mozilla_Extensions#media_features)
-- [Erweiterte WebKit-Media-Features](/de/docs/Web/CSS/WebKit_Extensions#media_features)
+- [Testen von Media Queries programmgesteuert](/de/docs/Web/CSS/CSS_media_queries/Testing_media_queries)
+- [CSS-Animationen zwischen Media Queries](https://davidwalsh.name/animate-media-queries)
+- [Erweiterte Mozilla Media Features](/de/docs/Web/CSS/Mozilla_Extensions#media_features)
+- [Erweiterte WebKit Media Features](/de/docs/Web/CSS/WebKit_Extensions#media_features)
diff --git a/files/de/web/security/user_activation/index.md b/files/de/web/security/user_activation/index.md
index 39f325c58..35e750645 100644
--- a/files/de/web/security/user_activation/index.md
+++ b/files/de/web/security/user_activation/index.md
@@ -1,33 +1,33 @@
---
-title: Funktionen, die von der Nutzeraktivierung abhängig sind
+title: Funktionen, die durch Benutzeraktivierung gesteuert werden
slug: Web/Security/User_activation
l10n:
- sourceCommit: 225431159da2ef74dca5984e6f07bd8c5cae4df8
+ sourceCommit: 7b9000bfb3bfcfd67161df627d0101a29f1ebbc0
---
{{QuickLinksWithSubpages("/de/docs/Web/Security")}}
-Um sicherzustellen, dass Anwendungen keine APIs missbrauchen können, die bei unerwünschtem Verhalten eine schlechte Benutzererfahrung schaffen, können einige APIs nur verwendet werden, wenn sich der Benutzer in einem "aktiven Interaktionszustand" befindet. Das bedeutet, dass der Benutzer derzeit mit der Webseite interagiert oder mindestens einmal mit der Seite interagiert hat. Browser beschränken den Zugriff auf sensible APIs wie Pop-ups, Vollbildmodus oder Vibrations-APIs auf aktive Benutzerinteraktionen, um zu verhindern, dass bösartige Skripte diese Funktionen missbrauchen. Diese Seite listet Funktionen der Webplattform auf, die nur nach Nutzeraktivierung verfügbar sind.
+Um sicherzustellen, dass Anwendungen APIs nicht missbrauchen, die bei unerwünschtem Verhalten zu einem schlechten Benutzererlebnis führen können, können einige APIs nur verwendet werden, wenn der Benutzer sich in einem "aktiven Interaktionszustand" befindet. Das bedeutet, dass der Benutzer derzeit mit der Webseite interagiert oder mindestens einmal mit der Seite interagiert hat. Browser beschränken den Zugriff auf sensible APIs wie Popups, Vollbild- oder Vibrations-APIs auf aktive Benutzerinteraktionen, um zu verhindern, dass bösartige Skripte diese Funktionen missbrauchen. Diese Seite listet Webplattform-Funktionen auf, die nur nach einer Benutzeraktivierung verfügbar sind.
-Eine Nutzeraktivierung impliziert entweder, dass der Benutzer gerade mit der Seite interagiert, oder dass seit dem Laden der Seite eine Interaktion erfolgt ist. Typischerweise ist dies ein Klick auf einen Button oder eine andere Benutzerinteraktion mit der Benutzeroberfläche.
+Eine Benutzeraktivierung deutet entweder darauf hin, dass der Benutzer derzeit mit der Seite interagiert oder seit dem Laden der Seite eine Interaktion abgeschlossen hat. Dies ist typischerweise ein Klick auf einen Button oder eine andere Benutzerinteraktion mit der Benutzeroberfläche.
-Genauer gesagt ist ein _Aktivierungsauslösendes Eingabeereignis_ ein Ereignis, das:
+Genauer gesagt ist ein _Aktivierungsereignis_ ein Ereignis, das:
- das Attribut [`isTrusted`](/de/docs/Web/API/Event/isTrusted) auf `true` gesetzt hat, und
- ein Ereignis der folgenden Typen ist:
- - [`keydown`](/de/docs/Web/API/Element/keydown_event) (ausgenommen die Esc-Taste oder eine vom User-Agent reservierte Tastenkombination)
+ - [`keydown`](/de/docs/Web/API/Element/keydown_event) (außer der Esc-Taste oder einer vom Benutzeragenten reservierten Tastenkombination)
- [`mousedown`](/de/docs/Web/API/Element/mousedown_event)
- [`pointerdown`](/de/docs/Web/API/Element/pointerdown_event) (wenn `pointerType` "mouse" ist)
- [`pointerup`](/de/docs/Web/API/Element/pointerup_event) (wenn `pointerType` nicht "mouse" ist)
- [`touchend`](/de/docs/Web/API/Element/touchend_event)
-Wenn eine Aktivierung ausgelöst wurde, unterscheidet der User-Agent zwischen zwei Arten von Fensterzuständen der Nutzeraktivierung: Sticky und Transient.
+Wenn eine Aktivierung ausgelöst wurde, unterscheidet der Benutzeragent zwischen zwei Arten von Benutzeraktivierungsfensterzuständen: Sticky und Transient.
## Transiente Aktivierung
-{{Glossary("Transient_activation", "Transiente Aktivierung")}} ist ein Fensterzustand, der anzeigt, dass ein Benutzer kürzlich einen Button gedrückt, eine Maus bewegt, ein Menü verwendet oder eine andere Nutzerinteraktion durchgeführt hat. Transiente Aktivierung erlischt nach einem Timeout (falls sie nicht durch weitere Interaktion erneuert wird) und kann auch von einigen APIs verbraucht werden (wie [`Window.open()`](/de/docs/Web/API/Window/open)).
+{{Glossary("Transient_activation", "Transiente Aktivierung")}} ist ein Fensterzustand, der anzeigt, dass ein Benutzer kürzlich einen Button gedrückt, die Maus bewegt, ein Menü verwendet oder eine andere Benutzerinteraktion durchgeführt hat. Transiente Aktivierung läuft nach einem Timeout ab (sofern sie nicht durch weitere Interaktion erneuert wird) und kann auch von einigen APIs verbraucht werden (wie [`Window.open()`](/de/docs/Web/API/Window/open)).
-APIs, die eine transiente Aktivierung erfordern (Liste ist nicht abschließend):
+APIs, die transiente Aktivierung erfordern (Liste ist nicht vollständig):
- [`Clients.openWindow()`](/de/docs/Web/API/Clients/openWindow)
- [`Clipboard.read()`](/de/docs/Web/API/Clipboard/read)
@@ -56,33 +56,32 @@ APIs, die eine transiente Aktivierung erfordern (Liste ist nicht abschließend):
- [`RemotePlayback.prompt()`](/de/docs/Web/API/RemotePlayback/prompt)
- [`Serial.requestPort()`](/de/docs/Web/API/Serial/requestPort)
- [`USB.requestDevice()`](/de/docs/Web/API/USB/requestDevice)
-- [`Keyboard.lock()`](/de/docs/Web/API/Keyboard/lock)
- [`Window.getScreenDetails()`](/de/docs/Web/API/Window/getScreenDetails)
- [`Window.open()`](/de/docs/Web/API/Window/open)
- [`Window.queryLocalFonts()`](/de/docs/Web/API/Window/queryLocalFonts)
+- [`Window.showDirectoryPicker()`](/de/docs/Web/API/Window/showDirectoryPicker)
- [`Window.showOpenFilePicker()`](/de/docs/Web/API/Window/showOpenFilePicker)
- [`Window.showSaveFilePicker()`](/de/docs/Web/API/Window/showSaveFilePicker)
-- [`Window.showDirectoryPicker()`](/de/docs/Web/API/Window/showDirectoryPicker)
- [`WindowClient.focus()`](/de/docs/Web/API/WindowClient/focus)
- [`XRSystem.requestSession()`](/de/docs/Web/API/XRSystem/requestSession)
## Sticky Aktivierung
-{{Glossary("Sticky_activation", "Sticky Aktivierung")}} ist ein Fensterzustand, der anzeigt, dass ein Benutzer einen Button gedrückt, eine Maus bewegt, ein Menü verwendet oder eine andere Nutzerinteraktion durchgeführt hat. Sie wird nach ihrer erstmaligen Einstellung nicht zurückgesetzt (im Gegensatz zur transienten Aktivierung).
+{{Glossary("Sticky_activation", "Sticky Aktivierung")}} ist ein Fensterzustand, der anzeigt, dass ein Benutzer einen Button gedrückt, die Maus bewegt, ein Menü benutzt oder eine andere Benutzerinteraktion durchgeführt hat. Sie wird nicht zurückgesetzt, nachdem sie einmal gesetzt wurde (im Gegensatz zur transienten Aktivierung).
-APIs, die eine sticky Aktivierung erfordern (nicht abschließend):
+APIs, die Sticky Aktivierung erfordern (nicht vollständig):
-- [`beforeunload`](/de/docs/Web/API/Window/beforeunload_event) Ereignis
+- Ereignis [`beforeunload`](/de/docs/Web/API/Window/beforeunload_event)
- [`Navigator.vibrate()`](/de/docs/Web/API/Navigator/vibrate)
- [`VirtualKeyboard.show()`](/de/docs/Web/API/VirtualKeyboard/show)
-- Autoplay von [Media und Web Audio APIs](/de/docs/Web/Media/Autoplay_guide) (insbesondere für [`AudioContexts`](/de/docs/Web/API/AudioContext)).
+- Autoplay von [Media- und Web-Audio-APIs](/de/docs/Web/Media/Autoplay_guide) (insbesondere für [`AudioContexts`](/de/docs/Web/API/AudioContext)).
## UserActivation API
-Um programmatisch zu bestimmen, ob ein Fenster entweder sticky oder transiente Nutzeraktivierung hat, bietet die [`UserActivation`](/de/docs/Web/API/UserActivation) API zwei Eigenschaften, die über [`navigator.userActivation`](/de/docs/Web/API/Navigator/userActivation) verfügbar sind:
+Um programmgesteuert zu bestimmen, ob ein Fenster entweder Sticky oder Transiente Benutzeraktivierung hat, bietet die [`UserActivation`](/de/docs/Web/API/UserActivation) API zwei Eigenschaften, die über [`navigator.userActivation`](/de/docs/Web/API/Navigator/userActivation) verfügbar sind:
-- [`UserActivation.hasBeenActive`](/de/docs/Web/API/UserActivation/hasBeenActive) zeigt an, ob das Fenster eine sticky Nutzeraktivierung hat.
-- [`UserActivation.isActive`](/de/docs/Web/API/UserActivation/isActive) zeigt an, ob das Fenster eine transiente Nutzeraktivierung hat.
+- [`UserActivation.hasBeenActive`](/de/docs/Web/API/UserActivation/hasBeenActive) gibt an, ob das Fenster eine Sticky Benutzeraktivierung hat.
+- [`UserActivation.isActive`](/de/docs/Web/API/UserActivation/isActive) gibt an, ob das Fenster eine Transiente Benutzeraktivierung hat.
## Siehe auch