Skip to content

Commit

Permalink
chore(de): translate diff [2024-10-11]
Browse files Browse the repository at this point in the history
Machine translation from English using gpt-4o-2024-08-06.

Source: https://github.com/mdn/content/tree/4c81451d326b3bea82a02d912b9320273ad8572d

System prompt:

```md
You are tasked with translating MDN Web Docs content from English to German.

Ensure that the translation is accurate, preserves technical terminology, and follows the rules provided below.

1. Format:

   - The input is a Markdown file.
   - The output should be a Markdown file.
   - Return the raw output, without wrapping it in a Markdown code block.
   - Keep GFM alert syntax untranslated, such as `> [!NOTE]`, `> [!WARNING]`, and `> [!CALLOUT]`.
   - If the input contains HTML tags wrapped in backticks (e.g. `<video>`), make sure they are wrapped in the output.

2. Language:

   - Prefer formal language ("Sie") over informal language ("du").

3. Code blocks:

   - Do not translate code blocks.
   - Do not translate terms wrapped in backticks.

4. Macro calls:

   - MDN uses macros for dynamic content insertion. These macros must remain **unchanged** and not translated.
   - Macro calls start with `{{`, followed by the macro name, optional parameters, and end with `}}`.
   - Avoid invalid macro calls by ensuring curly braces, parentheses, and quotes are closed properly.

5. Technical terms and code snippets in text:

   - Keep technical terms like element names, attributes, and method names in **English**. Only translate the surrounding descriptive text.

6. Links and References:

   - Translate link descriptions, but keep the URLs and their structure intact.
   - Do not change the locale in URLs.

7. Glossary:

   - "Browser compatibility" => "Browser-Kompatibilität"
   - "Guide" => "Leitfaden"
   - "How to" => "Anleitung"

Translate the following Markdown content from **English** to **German** while adhering to the rules above.
```
  • Loading branch information
caugner committed Oct 11, 2024
1 parent 3e2c4ea commit e9ea88b
Show file tree
Hide file tree
Showing 66 changed files with 4,033 additions and 1,867 deletions.
38 changes: 20 additions & 18 deletions files/de/glossary/intrinsic_size/index.md
Original file line number Diff line number Diff line change
@@ -1,27 +1,27 @@
---
title: Intrinsic size
title: Intrinsische Größe
slug: Glossary/Intrinsic_Size
l10n:
sourceCommit: 726f971467b4cdd339e29ee10403fce5b3e87f42
sourceCommit: c0daf1f038fdbdb62d71bfdeaf3a0a083660792c
---

{{GlossarySidebar}}

Im CSS beschreibt die _intrinsische Größe_ eines Elements die Größe, die es rein basierend auf seinem Inhalt hätte, ohne die Auswirkungen des Kontexts, in dem es erscheint, zu berücksichtigen. Zum Beispiel die von den CSS-[Box-Modell](/de/docs/Learn/CSS/Building_blocks/The_box_model)-Eigenschaften angewandte Größenbestimmung. Die intrinsischen Größen eines Elements werden durch seine {{cssxref("min-content")}}- und {{cssxref("max-content")}}-Größen dargestellt.
In CSS ist die _intrinsische Größe_ eines Elements die Größe, die es aufgrund seines Inhalts hätte, ohne die Auswirkungen des Kontexts zu berücksichtigen, in dem es erscheint. Zum Beispiel die Größenanpassung, die durch CSS-[Box-Modell](/de/docs/Learn/CSS/Building_blocks/The_box_model)-Eigenschaften angewendet wird. Die intrinsischen Größen eines Elements werden durch seine {{cssxref("min-content")}} und {{cssxref("max-content")}} Größen dargestellt.

Inline-Elemente sind intrinsisch dimensioniert: [Größenbestimmung](/de/docs/Web/CSS/CSS_box_sizing) und [Box](/de/docs/Web/CSS/CSS_box_model)-Eigenschaften einschließlich {{cssxref("height")}}, {{cssxref("width")}}, {{cssxref("block-size")}}, {{cssxref("inline-size")}}, und {{cssxref("padding-block")}} und {{cssxref("margin-block")}} haben keine Auswirkungen auf sie (obwohl {{cssxref("margin-inline")}} und {{cssxref("padding-inline")}} dies tun).
Inline-Elemente werden intrinsisch dimensioniert: [Sizing](/de/docs/Web/CSS/CSS_box_sizing) und [Box](/de/docs/Web/CSS/CSS_box_model)-Eigenschaften wie {{cssxref("height")}}, {{cssxref("width")}}, {{cssxref("block-size")}}, {{cssxref("inline-size")}}, sowie {{cssxref("padding-block")}} und {{cssxref("margin-block")}} haben keinen Einfluss auf sie (obwohl {{cssxref("margin-inline")}} und {{cssxref("padding-inline")}} dies tun).

Beispielsweise ist die minimale intrinsische Größe des inline {{htmlelement("span")}}-Elements die minimale Größe, die es hätte, wenn es gefloatet würde (ohne andere CSS-Box-Eigenschaften angewendet zu haben), innerhalb eines Containers mit einer Inline-Größe von `0px`. Die maximale intrinsische Größe ist das Gegenteil. Es ist die Größe, die das gleiche `<span>`-Element hätte, wenn die Inline-Größe seines Containers unendlich wäre.
Zum Beispiel ist die minimale intrinsische Größe des Inline-{{htmlelement("span")}}-Elements die minimale Größe, die es hätte, wenn es gefloatet wäre (ohne andere CSS-Box-Eigenschaften anzuwenden), in einem Container mit einer Inline-Größe von `0px`. Die maximale intrinsische Größe ist das Gegenteil. Es ist die Größe, die das gleiche `<span>` hätte, wenn die Inline-Größe seines Containers unendlich wäre.

Die intrinsische Größe hat für Bilder die gleiche Bedeutung wie für Text — die Größe, in der die Bilder angezeigt werden, wenn kein CSS angewendet wird, um das Rendering zu ändern.
Intrinsische Größe hat für Bilder die gleiche Bedeutung wie für Text — die Größe, in der die Bilder angezeigt werden, wenn kein CSS angewendet wird, um das Rendering zu ändern.

Pixeldichte und Auflösung beeinflussen die intrinsische Größe. Standardmäßig wird bei Bildern von einer "1x"-Pixeldichte ausgegangen (1 Gerät-Pixel = 1 CSS-Pixel), in diesem Fall ist die intrinsische Größe einfach die Pixelhöhe und -breite. Die intrinsische Größe und Auflösung eines Bildes kann explizit in seinen {{Glossary("EXIF", "EXIF")}}-Daten angegeben werden. Die Pixeldichte von Bildern kann auch für Bilder mit dem [`srcset`](/de/docs/Web/HTML/Element/img#srcset)-Attribut festgelegt werden. Beachten Sie, dass, wenn beide Mechanismen verwendet werden, der `srcset`-Wert "über" dem EXIF-Wert angewendet wird.
Pixeldichte und Auflösung beeinflussen die intrinsische Größe. Standardmäßig wird angenommen, dass Bilder eine "1x"-Pixeldichte haben (1 Gerätepixel = 1 CSS-Pixel). In diesem Fall ist die intrinsische Größe einfach die Pixelhöhe und -breite. Eine Bildgröße und Auflösung können explizit in ihren {{Glossary("EXIF", "EXIF")}}-Daten angegeben werden. Die Pixeldichte kann auch für Bilder mit dem [`srcset`](/de/docs/Web/HTML/Element/img#srcset)-Attribut festgelegt werden. Beachten Sie, dass, wenn beide Mechanismen verwendet werden, der `srcset`-Wert "über" dem EXIF-Wert angewendet wird.

Die intrinsischen Größen und deren Berechnungsweise sind im [CSS-Sizing-Modul](/de/docs/Web/CSS/CSS_box_sizing) definiert.
Intrinsische Größen und deren Berechnungen sind im [CSS-Sizing-Modul](/de/docs/Web/CSS/CSS_box_sizing) definiert.

#### minimale intrinsische Größe
#### Minimale intrinsische Größe

Um ein Element entsprechend seiner minimalen intrinsischen Größe zu setzen, verwenden Sie {{cssxref("inline-size")}} (oder {{cssxref("width")}} in horizontalen Schreibmodi, wie Englisch und Hebräisch) auf {{cssxref("min-content")}}. Dies setzt das Element auf die Größe, die es hätte, wenn der Text so klein wie möglich in der Inline-Richtung umbrochen würde, ohne einen Überlauf zu verursachen, mit so viel weichem Umbruch wie möglich. Für ein Feld, das eine Zeichenkette enthält, wird die minimale intrinsische Größe durch das längste Wort definiert.
Um ein Element gemäß seiner minimalen intrinsischen Größe festzulegen, setzen Sie die {{cssxref("inline-size")}} (oder {{cssxref("width")}} in horizontale Schreibrichtungen, wie Englisch und Hebräisch) auf {{cssxref("min-content")}}. Dies setzt das Element auf die Größe, die es hätte, wenn der Text so klein wie möglich in Inline-Richtung umbrochen würde, ohne einen Überlauf zu verursachen, mit so viel soft-wrapping wie möglich. Bei einem Kasten, der einen Textstring enthält, wäre die minimale intrinsische Größe durch das längste Wort definiert.

```html hidden
<p>Text wraps, making the element only as wide as its longest word.</p>
Expand All @@ -36,9 +36,9 @@ p {

{{ EmbedLiveSample('minimale intrinsische Größe', '100%', '220') }}

#### maximale intrinsische Größe
#### Maximale intrinsische Größe

Die maximale intrinsische Größe ist das Gegenteil. Sie ist die Größe des Elements, wenn die Inline-Größe des Containers unendlich wäre. Textinhalt würde so breit wie möglich angezeigt, ohne weichen Umbruch, selbst wenn es seinen Container überläuft. Der Schlüsselwortwert {{cssxref("max-content")}} setzt dieses Verhalten.
Die maximale intrinsische Größe ist das Gegenteil. Sie ist die Größe des Elements, wenn die Inline-Größe des Containers unendlich wäre. Der Textinhalt würde so breit wie möglich angezeigt werden, ohne soft-wrapping, selbst wenn er seinen Container überschreiten würde. Der Stichwortwert {{cssxref("max-content")}} setzt dieses Verhalten.

```html hidden
<p>Element grows as text doesn't wrap.</p>
Expand All @@ -58,13 +58,15 @@ p {

{{ EmbedLiveSample('maximale intrinsische Größe', '100%', '200') }}

## Extrinsische Größenbestimmung
## Extrinsische Größenanpassung

Das Gegenteil von _intrinsischer Größe_ ist **_extrinsische Größe_**, die auf dem Kontext eines Elements basiert, ohne Rücksicht auf seinen Inhalt. Die extrinsische Größenbestimmung wird durch die Box-Modell-Eigenschaftenwerte bestimmt. Bei extrinsischer Größenbestimmung geben Prozentsätze die Größe eines Feldes in Bezug auf den enthaltenden Block des Feldes an.
Das Gegenteil von _intrinsischer Größe_ ist **_extrinsische Größe_**, die auf dem Kontext eines Elements basiert, ohne Rücksicht auf seinen Inhalt. Extrinsische Größenanpassung wird durch Box-Modell-Eigenschaftswerte bestimmt. Bei extrinsischer Größenanpassung geben Prozentsätze die Größe eines Kastens im Verhältnis zum enthaltenden Block des Kastens an.

## Siehe auch

- CSS {{cssxref("min-content")}}, {{cssxref("max-content")}}, und {{cssxref("fit-content")}} Werteigenschaften.
- CSS {{cssxref("aspect-ratio")}} Eigenschaft
- [CSS-Box-Sizing](/de/docs/Web/CSS/CSS_box_sizing) Modul
- [CSS-Sizing-Spezifikation: Intrinsische Größen](https://www.w3.org/TR/css-sizing-3/#intrinsic-sizes)
- CSS {{cssxref("min-content")}}, {{cssxref("max-content")}} und {{cssxref("fit-content")}} Eigenschaftswerte.
- {{cssxref("interpolate-size")}}
- {{cssxref("aspect-ratio")}}
- {{cssxref("calc-size()")}}
- [CSS Box Sizing](/de/docs/Web/CSS/CSS_box_sizing)-Modul
- [CSS-Spezifikation zur Größenanpassung: intrinsische Größen](https://www.w3.org/TR/css-sizing-3/#intrinsic-sizes)
20 changes: 10 additions & 10 deletions files/de/web/api/animation/commitstyles/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,16 @@ title: "Animation: commitStyles() Methode"
short-title: commitStyles()
slug: Web/API/Animation/commitStyles
l10n:
sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
sourceCommit: 816cc4d4a5a318a23222946b6981bb92b499aebb
---

{{APIRef("Web Animations")}}

Die `commitStyles()` Methode der [`Animation`](/de/docs/Web/API/Animation) Schnittstelle des [Web Animations API](/de/docs/Web/API/Web_Animations_API) schreibt die [berechneten Werte](/de/docs/Web/CSS/computed_value) der aktuellen Stile der Animation in das [`style`](/de/docs/Web/HTML/Global_attributes#style) Attribut des Ziel-Elements. `commitStyles()` funktioniert selbst dann, wenn die Animation [automatisch entfernt wurde](/de/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API#automatically_removing_filling_animations).
Die `commitStyles()` Methode des [Web Animations API](/de/docs/Web/API/Web_Animations_API)'s [`Animation`](/de/docs/Web/API/Animation) Interface schreibt die [berechneten Werte](/de/docs/Web/CSS/computed_value) der aktuellen Stile der Animation in das [`style`](/de/docs/Web/HTML/Global_attributes/style) Attribut des Ziel-Elements. `commitStyles()` funktioniert auch, wenn die Animation [automatisch entfernt](/de/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API#automatically_removing_filling_animations) wurde.

`commitStyles()` kann in Kombination mit `fill` verwendet werden, um den Endzustand einer Animation nach deren Abschluss bestehen zu lassen. Derselbe Effekt könnte auch nur mit `fill` erzielt werden, aber [die Verwendung von Animationen mit unbegrenztem Füllverhalten wird nicht empfohlen](https://drafts.csswg.org/web-animations-1/#fill-behavior). Animationen [haben Vorrang vor allen statischen Stilen](/de/docs/Web/CSS/Cascade#cascading_order), sodass eine unbegrenzt füllende Animation verhindern kann, dass das Ziel-Element jemals normal gestylt wird.
`commitStyles()` kann in Kombination mit `fill` verwendet werden, um den Endzustand einer Animation nach deren Ende beizubehalten. Der gleiche Effekt könnte auch nur mit `fill` erreicht werden, aber [die Verwendung von unendlich füllenden Animationen wird nicht empfohlen](https://drafts.csswg.org/web-animations-1/#fill-behavior). Animationen [haben Vorrang vor allen statischen Stilen](/de/docs/Web/CSS/Cascade#cascading_order), sodass eine unendlich füllende Animation verhindern kann, dass das Ziel-Element jemals normal gestylt wird.

Durch die Verwendung von `commitStyles()` wird der Stilzustand in das [`style`](/de/docs/Web/HTML/Global_attributes#style) Attribut des Elements geschrieben, wo sie normal modifiziert und ersetzt werden können.
Durch die Verwendung von `commitStyles()` wird der Stilzustand in das [`style`](/de/docs/Web/HTML/Global_attributes/style) Attribut des Elements geschrieben, wo sie wie normale Stile modifiziert und ersetzt werden können.

## Syntax

Expand All @@ -26,17 +26,17 @@ Keine.

### Rückgabewert

Keiner ({{jsxref("undefined")}}).
Keine ({{jsxref("undefined")}}).

## Beispiele

### Den Endzustand einer Animation festlegen
### Festschreiben des Endzustands einer Animation

In diesem Beispiel haben wir zwei Schaltflächen, beschriftet mit "Styles festschreiben" und "Vorwärts füllen". Beide Schaltflächen animieren, wenn Sie darauf klicken, und beide halten den Endzustand der Animation aufrecht.
In diesem Beispiel gibt es zwei Schaltflächen, mit den Beschriftungen "Stile festschreiben" und "Vorwärts füllen". Beide Schaltflächen führen eine Animation aus, wenn Sie sie anklicken, und beide Schaltflächen behalten den Endzustand der Animation bei.

Der Unterschied besteht jedoch darin, dass "Vorwärts füllen" nur `fill: "forwards"` verwendet, um den Endzustand der Animation zu bewahren: Das bedeutet, dass der Browser den Zustand der Animation auf unbestimmte Zeit oder bis zur automatischen Entfernung aufrechterhalten muss.
Der Unterschied ist jedoch, dass "Vorwärts füllen" nur `fill: "forwards"` verwendet, um den Endzustand der Animation beizubehalten: Dies bedeutet, dass der Browser den Zustand der Animation unendlich lang beibehalten muss, oder bis er automatisch entfernt werden kann.

Die Schaltfläche "Styles festschreiben" wartet jedoch, bis die Animation fertig ist, ruft dann `commitStyles()` auf und storniert die Animation, sodass der abgeschlossene Stil als Wert des `style` Attributs und nicht als Animationszustand festgelegt wird.
Die Schaltfläche "Stile festschreiben" hingegen wartet darauf, dass die Animation endet, ruft dann `commitStyles()` auf und storniert anschließend die Animation, sodass der abgeschlossene Stil als Wert des `style` Attributs festgehalten wird, anstatt als Animationszustand.

#### HTML

Expand Down Expand Up @@ -102,4 +102,4 @@ fillForwards.addEventListener("click", async (event) => {
## Siehe auch

- [Web Animations API](/de/docs/Web/API/Web_Animations_API)
- [`Animation`](/de/docs/Web/API/Animation) für andere Methoden und Eigenschaften, die Sie zur Steuerung von Web-Seiten-Animationen verwenden können.
- [`Animation`](/de/docs/Web/API/Animation) für weitere Methoden und Eigenschaften, die Sie verwenden können, um Animationen auf Webseiten zu steuern.
28 changes: 14 additions & 14 deletions files/de/web/api/css_object_model/css_declaration_block/index.md
Original file line number Diff line number Diff line change
@@ -1,28 +1,28 @@
---
title: CSS Declaration Block
title: CSS-Deklarationsblock
slug: Web/API/CSS_Object_Model/CSS_Declaration_Block
l10n:
sourceCommit: b07efa13f8459a44a2cbc7b6cdb3279967565e63
sourceCommit: 816cc4d4a5a318a23222946b6981bb92b499aebb
---

{{DefaultAPISidebar("CSSOM")}}

Ein **CSS-Deklarationsblock** ist eine geordnete Sammlung von CSS-Eigenschaften und -Werten. Im DOM wird er als [`CSSStyleDeclaration`](/de/docs/Web/API/CSSStyleDeclaration) dargestellt.

Jedes Paar von Eigenschaft und Wert wird als [CSS-Deklaration](/de/docs/Web/API/CSS_Object_Model/CSS_Declaration) bezeichnet. Der CSS-Deklarationsblock hat die folgenden zugehörigen Eigenschaften:
Jedes Paar aus Eigenschaft und Wert wird als [CSS-Deklaration](/de/docs/Web/API/CSS_Object_Model/CSS_Declaration) bezeichnet. Der CSS-Deklarationsblock hat die folgenden zugehörigen Eigenschaften:

- computed flag
- : Wird gesetzt, wenn das [`CSSStyleDeclaration`](/de/docs/Web/API/CSSStyleDeclaration)-Objekt ein berechneter und kein spezifizierter Stil ist. Standardmäßig nicht gesetzt.
- declarations
- : Die mit diesem Objekt verbundenen [CSS-Deklarationen](/de/docs/Web/API/CSS_Object_Model/CSS_Declaration).
- parent CSS rule
- : Die [`CSSRule`](/de/docs/Web/API/CSSRule), mit der der CSS-Deklarationsblock verbunden ist, andernfalls null.
- owner node
- : Das mit dem CSS-Deklarationsblock verbundene [`element`](/de/docs/Web/API/Element), andernfalls null.
- updating flag
- : Wird gesetzt, wenn der CSS-Deklarationsblock das [`style`](/de/docs/Web/HTML/Global_attributes#style)-Attribut des Eigentümerknotens aktualisiert.
- berechnete Flagge
- : Wird gesetzt, wenn das [`CSSStyleDeclaration`](/de/docs/Web/API/CSSStyleDeclaration)-Objekt einen berechneten anstelle eines angegebenen Stils darstellt. Standardmäßig nicht gesetzt.
- Deklarationen
- : Die [CSS-Deklarationen](/de/docs/Web/API/CSS_Object_Model/CSS_Declaration), die mit diesem Objekt verbunden sind.
- übergeordnete CSS-Regel
- : Die [`CSSRule`](/de/docs/Web/API/CSSRule), mit der der CSS-Deklarationsblock verknüpft ist, andernfalls null.
- Eigentümerknoten
- : Das [`element`](/de/docs/Web/API/Element), mit dem der CSS-Deklarationsblock verknüpft ist, andernfalls null.
- Aktualisierungsflagge
- : Wird gesetzt, wenn der CSS-Deklarationsblock das [`style`](/de/docs/Web/HTML/Global_attributes/style)-Attribut des Eigentümerknotens aktualisiert.

Wenn eine [`CSSStyleDeclaration`](/de/docs/Web/API/CSSStyleDeclaration) von einer [CSS Object Model (CSSOM)](/de/docs/Web/API/CSS_Object_Model)-Schnittstelle zurückgegeben wird, sind diese Eigenschaften auf die in der Spezifikation definierten Werte gesetzt.
Wenn eine [`CSSStyleDeclaration`](/de/docs/Web/API/CSSStyleDeclaration) von einer Schnittstelle des [CSS Object Model (CSSOM)](/de/docs/Web/API/CSS_Object_Model) zurückgegeben wird, werden diese Eigenschaften gemäß der Spezifikation auf die entsprechenden Werte gesetzt.

## Einfaches Beispiel

Expand Down
Loading

0 comments on commit e9ea88b

Please sign in to comment.