From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- .../css_z\303\244hler_verwenden/index.html" | 126 ++++++++++++++++++++ files/de/web/css/css_lists_and_counters/index.html | 132 +++++++++++++++++++++ .../index.html" | 104 ++++++++++++++++ 3 files changed, 362 insertions(+) create mode 100644 "files/de/web/css/css_lists_and_counters/css_z\303\244hler_verwenden/index.html" create mode 100644 files/de/web/css/css_lists_and_counters/index.html create mode 100644 "files/de/web/css/css_lists_and_counters/konsistente_listeneinr\303\274ckung/index.html" (limited to 'files/de/web/css/css_lists_and_counters') diff --git "a/files/de/web/css/css_lists_and_counters/css_z\303\244hler_verwenden/index.html" "b/files/de/web/css/css_lists_and_counters/css_z\303\244hler_verwenden/index.html" new file mode 100644 index 0000000000..252f90b530 --- /dev/null +++ "b/files/de/web/css/css_lists_and_counters/css_z\303\244hler_verwenden/index.html" @@ -0,0 +1,126 @@ +--- +title: CSS Zähler verwenden +slug: Web/CSS/CSS_Lists_and_Counters/CSS_Zähler_verwenden +tags: + - Anleitung + - CSS + - CSS Listen + - CSS Wert + - Fortgeschrittene + - Layout + - Referenz + - Web +translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +--- +
{{CSSRef}}
+ +

CSS Zähler sind im Grunde von CSS verwaltete Variablen, deren Werte mittels CSS Regeln inkrementiert werden können, um nachzuvollziehen, wie oft sie verwendet wurden. Dies ermöglicht es, die Darstellung von Inhalten anhand der Positionierung innerhalb des Dokuments anzupassen. CSS Zähler sind eine Implementierung von Automatic counters and numbering in CSS 2.1.

+ +

Der Wert eines Zählers wird durch die Verwendung von {{cssxref("counter-reset")}} geändert. {{cssxref("counter-increment")}} kann auf einer Seite durch verwenden der counter() oder counters() Funktion der {{cssxref("content")}} Eigenschaft dargestellt werden.

+ +

Zähler verwenden

+ +

Um einen CSS Zähler zu verwenden, muss er zunächst auf einen Wert zurückgesetzt werden (standardmäßig 0). Um den Wert eines Zählers zu einem Element hinzuzufügen, kann die counter() Funktion verwendet werden. Das folgende CSS fügt am Anfang jedes h3 Elements "Abschnitt <der Wert des Zählers>:" ein.

+ +
body {
+  counter-reset: section;                      /* Setzt den Abschnittszähler auf 0 */
+}
+
+h3::before {
+  counter-increment: section;                  /* Erhöht den Abschnittszähler */
+  content: "Abschnitt " counter(section) ": "; /* Zeigt den Zähler an */
+}
+
+ +

Beispiel:

+ +
<h3>Einführung</h3>
+<h3>Inhalt</h3>
+<h3>Zusammenfassung</h3>
+ +

{{EmbedLiveSample("Zähler_verwenden", 280, 150)}}

+ +

Zähler verschachteln

+ +

Ein CSS Zähler ist besonders nützlich, um kontinuierte Listen zu erstellen, da in Kindelementen automatisch eine neue Instanz eines CSS Zählers erzeugt wird. Wird die counters() Funktion verwendet, kann ein String zwischen verschiedenen Leveln von verschachtelten Zählern eingefügt werden. Beispielsweise dieses CSS:

+ +
ol {
+  counter-reset: section;                /* Erstellt mit jedem ol Element
+                                            eine neue Instanz des
+                                            Abschnittszählers. */
+  list-style-type: none;
+}
+
+li::before {
+  counter-increment: section;            /* Inkrementiert nur diese Instanz
+                                            des Abschnittszählers. */
+  content: counters(section,".") " ";    /* Fügt den Wert aller Instanzen
+                                            des Abschnittszählers durch "."
+                                            getrennt hinzu. */
+                                         /* Falls < IE8 unterstützt werden soll,
+                                            sollte sichergestellt werden, dass
+                                            kein Leerzeichen nach dem ',' steht. */
+}
+
+ +

Kombiniert mit dem folgenden HTML:

+ +
<ol>
+  <li>Eintrag</li>          <!-- 1     -->
+  <li>Eintrag               <!-- 2     -->
+    <ol>
+      <li>Eintrag</li>      <!-- 2.1   -->
+      <li>Eintrag</li>      <!-- 2.2   -->
+      <li>Eintrag           <!-- 2.3   -->
+        <ol>
+          <li>Eintrag</li>  <!-- 2.3.1 -->
+          <li>Eintrag</li>  <!-- 2.3.2 -->
+        </ol>
+        <ol>
+          <li>Eintrag</li>  <!-- 2.3.1 -->
+          <li>Eintrag</li>  <!-- 2.3.2 -->
+          <li>Eintrag</li>  <!-- 2.3.3 -->
+        </ol>
+      </li>
+      <li>Eintrag</li>      <!-- 2.4   -->
+    </ol>
+  </li>
+  <li>Eintrag</li>          <!-- 3     -->
+  <li>Eintrag</li>          <!-- 4     -->
+</ol>
+<ol>
+  <li>Eintrag</li>          <!-- 1     -->
+  <li>Eintrag</li>          <!-- 2     -->
+</ol>
+ +

Erzeugt dieses Ergebnis:

+ +

{{EmbedLiveSample("Zähler_verschachteln", 250, 350)}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName("CSS2.1", "generate.html#generate.html#counters", "counter-reset")}}{{Spec2("CSS2.1")}}Ursprüngliche Definition
+ +

Siehe auch

+ + + +

Es gibt ein zusätzliches Beispiel unter http://www.mezzoblue.com/archives/20.../counter_intu/. Dieser Blogeintrag wurde am 01.11.2006 veröffentlicht, sollte jedoch noch zutreffen.

diff --git a/files/de/web/css/css_lists_and_counters/index.html b/files/de/web/css/css_lists_and_counters/index.html new file mode 100644 index 0000000000..e616ac7735 --- /dev/null +++ b/files/de/web/css/css_lists_and_counters/index.html @@ -0,0 +1,132 @@ +--- +title: CSS Lists and Counters +slug: Web/CSS/CSS_Lists_and_Counters +tags: + - CSS + - CSS Listen und Zähler + - CSS Referenz + - Übersicht +translation_of: Web/CSS/CSS_Lists_and_Counters +--- +
{{CSSRef}}
+ +

CSS Lists and Counters ist ein CSS Modul, das definiert, wie Listen dargestellt werden, wie Aufzählungspunkte gestylt werden können und wie Autoren neue Zähler erstellen können.

+ +

Referenz

+ +

Eigenschaften

+ +
+ +
+ +

@-Regeln

+ +
+
{{cssxref("@counter-style")}}
+
+
+
    +
  • {{cssxref("@counter-style/system","system")}}
    • +
  • {{cssxref("@counter-style/additive-symbols", "additive-symbols")}}
    • +
  • {{cssxref("@counter-style/negative", "negative")}}
    • +
  • {{cssxref("@counter-style/prefix", "prefix")}}
    • +
  • {{cssxref("@counter-style/suffix", "suffix")}}
    • +
  • {{cssxref("@counter-style/range", "range")}}
    • +
  • {{cssxref("@counter-style/pad", "pad")}}
    • +
  • {{cssxref("@counter-style/speak-as", "speak-as")}}
    • +
  • {{cssxref("@counter-style/fallback", "fallback")}}
    • +
+
+
+
+ +

Anleitungen

+ +
+
Konsistente Listeneinrückung
+
Erklärt, wie eine konsistente Einrückung zwischen verschiedenen Browsern erreicht werden kann.
+
CSS Zähler verwenden
+
Beschreibt, wie Zähler verwendet werden, um Aufzählungen außerhalb der traditionellen Listenelemente verwenden zu können oder um komplexe Zählungen durchzuführen.
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 Lists')}}{{Spec2('CSS3 Lists')}} 
{{SpecName('CSS2.1', 'generate.html')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung1.0{{CompatGeckoDesktop("1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung1.0{{CompatGeckoMobile("1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
diff --git "a/files/de/web/css/css_lists_and_counters/konsistente_listeneinr\303\274ckung/index.html" "b/files/de/web/css/css_lists_and_counters/konsistente_listeneinr\303\274ckung/index.html" new file mode 100644 index 0000000000..b2309f5e82 --- /dev/null +++ "b/files/de/web/css/css_lists_and_counters/konsistente_listeneinr\303\274ckung/index.html" @@ -0,0 +1,104 @@ +--- +title: Konsistente Listeneinrückung +slug: Web/CSS/CSS_Lists_and_Counters/Konsistente_Listeneinrückung +tags: + - Anleitung + - CSS + - Intermediate + - NeedsUpdate +translation_of: Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation +--- +
{{CSSRef}}
+ +

Eine der häufigsten Stiländerungen, die auf Listen angewendet werden, ist eine Änderung der Einrückungsweite — d. h. wie weit die Listeneinträge nach rechts verschoben sind. Dies führt oft zu Frustration, da das, was in einem Browser funktioniert, in einem anderen oft nicht denselben Effekt hat. Wenn zum Beispiel angegeben wird, dass Listen keinen linken Außenabstand haben, verschieben sie sich im Internet Explorer, bleiben jedoch hartnäckig am selben Platz in Gecko-basierten Browsern. Dieser Artikel hilft, die Probleme zu verstehen, die auftreten können, und wie man diese verhindert.

+ +

Um zu verstehen, warum dies der Fall ist, und noch wichtiger, wie das Problem generell vermieden werden kann, ist es notwendig, die Details der Listenerstellung zu untersuchen.

+ +

Eine Liste erstellen

+ +

Zunächst betrachten wir einen einzelnen Listeneintrag. Dieser Listeneintrag hat kein Aufzählungszeichen (auch bekannt als "Bullet") und ist noch nicht Teil einer Liste. Er hängt allein in der Leere, schlicht und einfach, wie in Abbildung 1 gezeigt.

+ +

Abbildung 1

+ +

Der gepunktete rote Rahmen repräsentiert die äußeren Ränder des Inhaltsbereichs des Listeneintrags. Erinnere dich, dass der Listeneintrag zu diesem Zeitpunkt weder einen Innenabstand noch Ränder besitzt. Falls wir zwei oder mehr Listeneinträge hinzufügen, erhalten wir als Ergebnis etwas wie in Abbildung 2.

+ +

Abbildung 2

+ +

Jetzt umschließen wir diese durch ein Elternelement; in diesem Fall, umschließen wir sie durch eine ungeordnete Liste (d. h. <ul>). Laut dem CSS Boxmodell müssen die Boxen von Listeneinträgen innerhalb des Inhaltsbereichs des Elternelements dargestellt werden. Da das Elternelement aktuell weder Innen- noch Außenabstände hat, erhalten wir als Ergebnis das in Abbildung 3 Gezeigte.

+ +

Abbildung 3

+ +

Hier zeigt uns der gepunktete blaue Rahmen die Ränder des Inhaltsbereichs des <ul> Elements. Da wir keinen Innenabstand für das <ul> Element haben, umschließt sein Inhalt die drei Listeneinträge passend.

+ +

Nun fügen wir Listenaufzählungszeichen hinzu. Da es sich hierbei um eine ungeordnete Liste handelt, fügen wir gewöhnliche gefüllte Kreis-"Bullets" hinzu, wie in Abbildung 4 dargestellt.

+ +

Abbildung 4

+ +

Visuell sind die Aufzählungszeichen außerhalb des Inhaltsbereichs des <ul>, jedoch spielt dies hier keine Rolle. Der Hauptpunkt ist, dass die Aufzählungszeichen außerhalb der "Hauptbox" des <li> Elements platziert sind, nicht des <ul>. Sie sind sozusagen Anhängsel der Listeneinträge, die außerhalb des Inhaltsbereichs des <li> liegen, jedoch trotzdem am <li> hängen.

+ +

Dies ist der Grund, warum in allen Browsern außer dem Internet Explorer für Windows die Aufzählungszeichen außerhalb der Rahmen eines <li> Elements liegen, vorausgesetzt, der Wert von list-style-position ist outside. Falls er zu inside geändert wird, werden die Aufzählungszeichen innerhalb des Inhalts des <li>s gezogen, obwohl sie eine Inlinebox sind, die am Anfang des <li> platziert ist.

+ +

Doppelt einrücken

+ +

Wie wird all dies nun im Dokument dargestellt? Im Moment haben wir eine Situation analog zu diesen Stilen:

+ +
ul, li {margin-left: 0; padding-left: 0;}
+ +

Falls diese Liste so wie sie ist in ein Dokument eingebunden würde, gäbe es keine sichtbare Einrückung und die Aufzählungszeichen liefen Gefahr, am linken Rand des Browserfensters herauszufallen.

+ +

Um dies zu vermeiden und eine Einrückung zu erhalten, gibt es nur drei Möglichkeiten für Browserhersteller.

+ +
    +
  1. Gib jedem <li> Element einen linken Außenabstand.
    2. +
  2. Gib dem <ul> Element einen linken Außenabstand.
    3. +
  3. Gib dem <ul> Element einen linken Innenabstand.
    4. +
+ +

Wie sich herausstellt, hat niemand auf die erste Option zurückgegriffen. Die zweite Option wurde von Internet Explorer für Windows und Macintosh und Opera gewählt. Die dritte wird von Gecko und allen darauf basierenden Browsern verwendet.

+ +

Lass uns die beiden Herangehensweisen genauer betrachten. Im Internet Explorer und Opera werden die Listen durch das Setzen eines linken Außenabstands von 40 Pixeln für das <ul> Element gesetzt. Falls wir dem <ul> Element eine Hintergrundfarbe zuweisen und die Rahmen der Listeneinträge und <ul> unverändert lassen, erhalten wir das Ergebnis, das in Abbildung 5 gezeigt wird.

+ +

Abbildung 5

+ +

Im Gegensatz dazu setzt Gecko einen linken Innenabstand von 40 Pixeln für das <ul> Element. Werden die exakt gleichen Stile benutzt, die zur Erzeugung von Abbildung 5 verwendet wurden, erhalten wir beim Laden des Beispiels in Gecko-basierten Browsern Abbildung 6.

+ +

Abbildung 6

+ +

Wie wir sehen können, bleiben die Aufzählungszeichen an den <li> Elementen hängen, unabhängig davon, wo sie sind. Der Unterschied liegt ausschließlich in der Darstellung des <ul>. Wir können den Unterschied nur sehen, wenn wir versuchen, einen Hintergrund oder einen Rahmen für das <ul> Element zu setzen.

+ +

Konsistenz finden

+ +

Zusammenfassend kann man sagen: Falls eine konsistente Darstellung von Listen zwischen Gecko, Internet Explorer und Opera gewünscht ist, müssen beide linken Abstände des <ul> Elements gesetzt werden, Innen- und Außenabstand. Wir können <li> für diesen Zweck komplett ignorieren. Zur Erstellung der Standardanzeige in Netscape 6.x schreibt man folgendes:

+ +
ul {margin-left: 0; padding-left: 40px;}
+ +

Falls lieber das Internet Explorer/Opera Modell gewünscht ist, dann:

+ +
ul {margin-left: 40px; padding-left: 0;}
+ +

Natürlich können die eigenen bevorzugten Werte angegeben werden. Wenn gewünscht, können beide auf 1.25em gesetzt werden -- es gibt keinen Grund, bei pixelbasierter Einrückung zu bleiben. Falls Listen zurückgesetzt werden sollen, sodass sie keine Einrückung haben, müssen sowohl Innen- als auch Außenabstand auf null gesetzt werden:

+ +
ul {margin-left: 0; padding-left: 0;}
+ +

Beachte hierbei jedoch, dass dadurch die Bullets außerhalb der Liste und deren Elternelement hängen. Falls das Elternelement das body Element ist, sind die Bullets höchstwahrscheinlich außerhalb des Browserfensters, und sind daher nicht sichtbar.

+ +

Zusammenfassung

+ +

Am Ende sehen wir, dass keiner der in diesem Artikel genannten Browser Listen richtig oder falsch darstellt. Sie verwenden verschiedene Standardstile und dadurch entstehen die Probleme. Wenn sichergestellt wird, dass sowohl linker Innen- als auch Außenabstand gesetzt sind, kann wesentlich größere browserübergreifende Konsistenz bei der Einrückung von Listen erzielt werden.

+ +

Empfehlungen

+ + + +
+

Originaldokumentinformation

+ + +
-- cgit v1.2.3-54-g00ecf