CSS-Eigenschaft: marquee-play-count, Kategorien: Animierte Inhalte (allgemein), Textdarstellung (allgemein), Basic Box Model (CSS 3), Marquee (CSS 3)
Wiederholungen einer Laufschrift
Bestimmt die Anzahl der Wiederholungen einer Laufschrift
Kurzbeschreibung | Werte | Standardwert | Kategorie | Hinweis |
---|---|---|---|---|
Wiederholungen einer Laufschrift |
| 1 |
| Neu in CSS 3 |
Verwandte Eigenschaften aus der Kategorie: Animierte Inhalte (allgemein), Textdarstellung (allgemein), Basic Box Model (CSS 3), Marquee (CSS 3):
- animation
- animation-delay
- animation-direction
- animation-duration
- animation-fill-mode
- animation-iteration-count
- animation-name
- animation-play-state
- animation-timing-function
- clear
- display
- float
- height
- hyphens
- letter-spacing
- line-break
- line-height
- line-stacking
- line-stacking-ruby
- line-stacking-shift
- line-stacking-strategy
- margin
- margin-bottom
- margin-left
- margin-right
- margin-top
- marquee-direction
- Aktuelle Seite: marquee-play-count
- marquee-speed
- marquee-style
- max-height
- max-width
- min-height
- min-width
- overflow
- overflow-style
- overflow-wrap
- overflow-x
- overflow-y
- padding
- padding-bottom
- padding-left
- padding-right
- padding-top
- rotation
- rotation-point
- tab-size
- text-align
- text-align-last
- text-decoration
- text-decoration-color
- text-decoration-line
- text-decoration-skip
- text-decoration-style
- text-emphasis
- text-emphasis-color
- text-emphasis-position
- text-emphasis-style
- text-height
- text-indent
- text-justify
- text-overflow
- text-shadow
- text-transform
- text-underline-position
- transition
- transition-delay
- transition-duration
- transition-property
- transition-timing-function
- visibility
- white-space
- width
- word-break
- word-spacing
- word-wrap
Folgendes ist beim Einsatz von marquee-play-count zu beachten:
Mit dem Marquee Module bietet CSS3 die Möglichkeit,
eine Laufschrift zu definieren.
Dieses Verhalten konnte früher über das HTML-Tag <marquee>
(Lauftext - Marquee (Microsoft))
umgesetzt werden.
marquee-play-count
bestimmt die Anzahl der Wiederholungen einer Laufschrift.
Erlaubte Werte sind
positive Ganzzahlen und das Schlüsselwort infinite
.
Laut W3C-Standard soll bei Werten über 16 und bei infinite
die Laufschrift nach 16 Wiederholungen nicht mehr wiederholt werden.
Aktuell (Februar 2013) werden die Eigenschaften des Marquee Module
lediglich vom Safari und Google Chrome und ausschließlich mit dem Vendor-Präfix -webkit-
unterstützt. Im Falle von marquee-play-count
reicht es jedoch nicht aus, der Eigenschaft das Vendor-Präfix voranzustellen.
Die Anzahl der Wiederholungen wird hier über
-webkit-marquee-repetition
gesteuert.
Nicht nur der Name -webkit-marquee-repetition
für Safari und Chrome weicht
von der Eigenschaft marquee-play-count
im W3C-Standard ab, auch das Verhalten
ist anders als im Standard beschrieben. Die Webkit-Browser haben nicht 1, sondern infinite
als Standardwert, auch das Beenden nach 16 Wiederholungen ist nicht implementiert, sprich: infinite
führt hier tatsächlich zu endlosen Wiederholungen.
Aufgrund der geringen Browserunterstützung und der bislang abweichenden Implementierung
in den Webkit-Browsern ist der
Einsatz von marquee-play-count
bzw. -webkit-marquee-repetition
nur bedingt sinnvoll.
![]() Firefox | ![]() Chrome | ![]() Internet Explorer | ![]() Safari | ![]() Opera |
|||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
CSS3 |
|
|
|
|
|
Weiterführende Informationen zu marquee-play-count:
- W3C Spezifikation:
http://www.w3.org/TR/css3-marquee/#marquee-play-count
- letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
marquee-direction - nächste CSS-Eigenschaft (Acc-Key: ALT + SHIFT + w):
marquee-speed
Beispiele
HTML:
<div id="example-1">Lorem ipsum dolor sit amet sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua labore et dolore magna aliquyam erat, sed diam voluptua at vero eos et accusam et justo duo dolores et ea rebum justo duo dolores et ea rebum.</div>
CSS:
div {
border: 4px solid #cccccc;
padding: 10px;
}
#example-1 {
overflow: -webkit-marquee;
overflow: marquee;
-webkit-marquee-repetition: 1;
marquee-play-count: 1
}
Beispiel Nr. 1 So sieht's aus:
HTML:
<div id="example-2">Lorem ipsum dolor sit amet sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua labore et dolore magna aliquyam erat, sed diam voluptua at vero eos et accusam et justo duo dolores et ea rebum justo duo dolores et ea rebum.</div>
CSS:
#example-2 {
overflow: -webkit-marquee;
overflow: marquee;
-webkit-marquee-repetition: 3;
marquee-play-count: 3;
}
Beispiel Nr. 2 So sieht's aus:
HTML:
<div id="example-3">Lorem ipsum dolor sit amet sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua labore et dolore magna aliquyam erat, sed diam voluptua at vero eos et accusam et justo duo dolores et ea rebum justo duo dolores et ea rebum.</div>
CSS:
#example-3 {
overflow: -webkit-marquee;
overflow: marquee;
-webkit-marquee-repetition: infinite;
marquee-play-count: infinite;
}
Beispiel Nr. 3 So sieht's aus:
HTML:
<div id="example-4">Lorem ipsum dolor sit amet sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua labore et dolore magna aliquyam erat, sed diam voluptua at vero eos et accusam et justo duo dolores et ea rebum justo duo dolores et ea rebum.</div>
CSS:
#example-4 {
overflow: -webkit-marquee;
overflow: marquee;
-webkit-marquee-speed: fast;
marquee-speed: fast;
}
/* Safari und Google Chrome verwenden den Standardwert infinite und wiederholen die Laufschrift
endlos, falls -webkit-marquee-repetition nicht definiert ist. */
Beispiel Nr. 4 So sieht's aus:
HTML:
<div id="testcase-vendor">Lorem ipsum dolor sit amet sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua labore et dolore magna aliquyam erat, sed diam voluptua at vero eos et accusam et justo duo dolores et ea rebum justo duo dolores et ea rebum.</div>
CSS:
#testcase-vendor {
overflow: -moz-marquee;
overflow: -webkit-marquee;
overflow: -o-marquee;
overflow: -ms-marquee;
-moz-marquee-play-count: 1;
-webkit-marquee-repetition: 1;
-o-marquee-play-count: 1;
-ms-marquee-play-count: 1;
}
Testbeispiel: Schreibweise mit
Vendor-Präfix
HTML:
<div id="testcase-standard">Lorem ipsum dolor sit amet sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua labore et dolore magna aliquyam erat, sed diam voluptua at vero eos et accusam et justo duo dolores et ea rebum justo duo dolores et ea rebum.</div>
CSS:
#testcase-standard {
overflow: marquee;
marquee-play-count: 1;
}
Testbeispiel: Standardschreibweise
Fehler melden
Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.
Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!
Vielen Dank!