Hallo Wolfgang,
Marquees sind in der Tat etwas bedenklich. Ich bin mir jetzt auch nicht ganz sicher, wie genau Version 2 sein sollte, aber vertikal durchlaufende Schriften halte ich für noch bedenklicher. Eine Leserichtung von links nach rechts ist dann doch etwas natürlicher und auch z.B. auf Bahn-Tickern im Alltag gängiger. Ich kenne z.B. auch eine Seite, auf welcher der Text von unten nach oben durchscrollt, gerade bei viel Information ist der erste Teil zu schnell weg und man muss eine Runde warten, bis der Text wieder da ist. Alternativ ist man schnell gelangweilt, falls die Geschwindigkeit zu gering ist. Dann wartet man auch nicht mehr darauf, den ganzen Inhalt zu lesen. Zwei bis drei Zeilen vertikal sind eben oft zu schnell weg, als dass man sie über die komplette Breite lesen könnte. Horizontal liest man einfach mit und hat eine "ganze Zeile breit" Zeit.

Ansonsten habe ich für deinen konkreten Vorschlag eine Testseite erstellt. Der Text scrollt beim Hovern des Marquees oder Schalters. Wird der Schalter geklickt, bleibt er auch nach Verlassen mit der Maus aktiv und der Text scrollt weiter. Fährt man danach über das Marquee hält der Text an, um ihn in Ruhe lesen und ggf. einen Link klicken zu können.

Das JavaScript habe ich so gekapselt, dass keine Konflikte mit anderen Skripten entstehen sollten. Außer die Variable customMarquee wurde bereits woanders verwendet …
Die Scroll-Geschwindigkeiten kannst du bei Bedarf nochmals am Anfang des Skriptes anpassen und auch die Bilder für den Schalter austauschen. Wäre auch zu umständlich bei jedem einzelnen Bildwechsel die komplette URL reinzuschreiben …

Um die Funktionalität zu gewährleisten, müsste es reichen, wenigstens die Attribute des Schalter-Bildes und Marquees aus der Testseite so ins Forum zu übernehmen. Ich habe zusätzlich noch einige Style-Anweisungen in den HEAD übernommen. Für die sonst noch vorkommenden Border- und Width-Attribute habe ich das dann zwar nicht mehr, aber zumindest sind diese jetzt Anweisungen in Style-Attributen gewichen. Der HTML-Validator wollte eben keine Border-Attribute in meiner HTML5-Testseite. Auf lange Sicht sollten solche alten Attribute also weichen und gegen entsprechende CSS-Anweisungen ausgetauscht werden. Auch alle IMG-Tags freuen sich über Alt-Attribute, selbst wenn diese leer sind.

Vor einer 1:1 Übernahme ins Forum würde ich dennoch empfehlen, nochmal zu prüfen, ob ich die korrekte Verschachtelung des HTML-Codes verwendet habe. Nach dem Bild des Schalters kam noch ein schließendes DIV. Für mich erschien dieses aus Versehen hineingeraten zu sein, sollte es aber dennoch korrekt gewesen sein, dann wird am Ende eines zu viel geschlossen.


Interessant finde ich, auf welche Art Attribute eines HTML-Tags wie z.B. dieses SRC-Attribut auch gesetzt werden können:

onmouseover="src='http://www.bilder-hochladen.net/files/kr03-x-182b.png';"
 

Ich würde mich nie darauf verlassen, aber das kannte ich vorher noch nicht. Gut zu wissen …
Im Normalfall gibt es eine setAttribute(…)-Methode, falls du das sonst nochmals brauchen solltest (und kein jQuery verfügbar ist).

Meinst du so, dass beim Deaktivieren der Zustand direkt als Aus angezeigt wird? Dann müsste aber wohl der beim Hovern angezeigte An-Zustand wieder raus.
Dann hat der Schalter keinen Hover-Effekt mehr, sondern zeigt dementsprechend nur noch an, ob er aktiviert ist oder nicht.

Ein Beispiel dazu wieder im Anhang.

Super!

Spontan sehe ich nur, dass in Zeile 6 nach margin und in Zeile 24 ein Semikolon am Ende fehlen. Mit Marquee habe ich mich nie sonderlich beschäftigt, sodass ich die richtigen Attribute und/oder Methoden-Aufrufe auch nicht direkt im Kopf habe. Ich werde demnächst nochmal etwas genauer drüberschauen, aber wahrscheinlich passt das so dann schon. Wenn die Möglichkeiten durch die Browser eingeschränkt wurden, wird da wohl nicht mehr viel Spielraum sein.

Hallo Wolfgang,

ich habe nun ziemlich lange mit dem Marquee herumprobiert. Die Überlänge ist und bleibt einfach problematisch. Eine bessere Alternative zu margin-left und width:0; habe ich nicht mehr gefunden. Letztlich verschafft das nur ein wenig mehr Spielraum, denn sobald das zusätzliche DIV für diesen Workaround links/rechts an die Grenzen stößt, wird die Animation umgekehrt. D. h. bei kleiner Marquee-Breite und/oder extremst langem Inhalt müsste früher oder später ein gewisses Limit erreicht werden.


Das Marquee-Tag war nie Teil der offiziellen HTML-Spezifikation, sondern nur ein proprietäres HTML-Tag von Microsoft für den IE. Irgendwann wurde es dann zwar auch in den anderen Browsern irgendwie eingeführt, aber eben nie nach einer offiziellen Spezifikation. Das Marquee-Tag gilt auch längst als veraltet und abgesehen davon, dass z. B. Chrome lange brauchte, bis das Tag überhaupt unterstützt wurde, könnte es auch sehr bald wieder komplett entfernt werden (ähnlich dem Blink-Element). In CSS3 wurden neue Spezifikationen für Marquee-Anweisungen eingeführt, allerdings hat bei mir noch kein Browser diese umgesetzt, wahrscheinlich zu neu und das Interesse der Browser-Hersteller an Marquee hält sich womöglich auch in Grenzen, sodass erst andere Funktionen für HTML5 und CSS3 Priorität haben, könnte ich mir zumindest gut vorstellen.

Wenn also die Unterstützung des alten Marquee-Tags womöglich bald wegfällt und die neuen CSS3-Anweisungen noch eine Weile nicht unterstützt werden, wäre es eine Überlegung wert, generell auf Marquees zu verzichten. Hinzu kommt das Problem, dass es ablenkend wirken kann oder einfach ignoriert wird, denn wer will schon warten, bis das Marquee zum Ende durchgelaufen ist.


Das Verhalten mit dem sich kurz öffnenden Container bei der Seitenaktualisierung kann ich so nicht beobachten. Die jQuery toggle()-Dokumentation sieht jedenfalls keine zwei verschiedenen Zeiten vor, die möglichen Parameter-Kombinationen kannst du dort gut einsehen. Sowas wie slideDown(0) geht natürlich auch, macht es aber unnötig komplex, da du das togglen dann auftrennen musst. Setze doch einfach .toggle(0). Wenn das nicht klappt, dann entsteht diese kurze Verzögerung beim Laden der Seite, bis alles geladen ist und die Skripte ausgeführt werden. Jedenfalls sieht es nach unterschiedlichem Ladeverhalten aus, da ich den Effekt bei mir so nicht beobachten konnte.

Hallo Wolfgang,

wenn du für deinen Blog verwertbare Informationen gefunden hast, darfst du die gerne verwenden.

Unter den vielen JS-Laufschriften gibt es leider nur einen geringen Prozentsatz an wirklich brauchbaren. Meistens leiden die eben wegen der Darstellung mit dem Prozessor (und manchmal viel zu komplizierter Berechnung) unter extremen Rucklern. Deshalb finde ich die mit CSS3 eingeführten Transitions und Animations so super, da oftmals viel JavaScript durch ein paar wenige geschickte CSS-Angaben ersetzt werden kann. Ansonsten sind Mischungen natürlich nach wie vor möglich.

Der Vorteil an der Verlagerung in CSS ist, dass die Effekte nicht mehr genauestens in JS ausprogrammiert werden müssen, sondern einfach nur angegeben wird, welchen End-Zustand ein Element wann einnehmen soll. Den Übergang von dem einen Zustand in den nächsten berechnet der Browser dann vollautomatisch. Im Idealfall von der Grafikkarte gestützt, die viel flüssigere Animationen/Übergänge berechnen kann, da sie für solche Sachen nunmal ausgelegt ist.

Es ist wirklich schade, dass die Demos von Creating Advanced “Marquee” with CSS3 Animation nicht direkt im IE funktionieren. War gestern noch unter Linux, habe es aber eben gerade in Windows gesehen. Allerdings muss man dazu sagen, dass die ersten Kommentare zu dem Artikel schon vor drei Jahren verfasst wurden und der IE meist nicht der erste Browser mit neuen Features an Bord ist. Vielleicht lässt sich das Beispiel aber dennoch im IE zum Laufen bringen. Mögliche Ideen gibt es noch gegen Ende dieses Beitrags.


Dennoch sollte der IE inzwischen eigentlich zumindest einige Angaben ohne spezielle Präfixe umsetzen können. Aber wirklich sicher bin ich mir da natürlich nicht. Ich konnte natürlich schön auf die zig browserspezifischen Schreibweisen verzichten, da ich, wie du auch schon schreibst, mir die Arbeit von -prefix-free habe abnehmen lassen. Die Styles werden übrigens nur manipuliert, wenn tatsächlich ein Präfix nötig ist. Ansonsten bleibt die Standard-Schreibweise einfach bestehen, wenn der Browser damit problemlos klarkommt. Es gibt nur wenige spezielle Szenarios, in denen -prefix-free nicht funktionieren soll, bisher hat es aber immer gut funktioniert, weil die gängigsten Einsätze davon abgedeckt werden. Was es so macht und warum es nur während der Entwicklung und nicht im Dauerbetrieb eingesetzt werden sollte, steht in diesem Artikel ganz gut beschrieben.

Hier nochmal das nötige Skript-Tag für den Head-Bereich:

<script src="https://rawgit.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js"></script>
 

Der Vorteil liegt einfach darin, dass ich beim Entwickeln und Testen nicht immer sofort alle unterschiedlichen Varianten ausschreiben und bei jeder Änderung beachten muss. So wären das beim Beispiel transform zusätzlich u.a. -webkit-transform, -moz-transform, -o-transform, -ms-transform. Natürlich könnte ich bei der Entwicklung im Firefox auch erstmal immer nur die -moz-Schreibweise nehmen (bei transform inzwischen nicht mehr nötig), allerdings ist es ohne Präfix doch meist deutlich einfacher zu lesen. Hier gibt es auch eine Liste mit einigen Browser-Präfixen, wobei ich -khtml- und -mso- noch nie wirklich in freier Wildbahn gesehen habe.


Hinzu kommt, dass sich die offizielle Schreibweise von einigen Generatoren verarbeiten lässt, welche einem die Arbeit abnehmen, alles nochmals für jeden Browser auszuschreiben. Einer dieser Generatoren wäre z.B. Pleeease Play, welcher noch zusätzliche CSS-Modifikationen beherrscht. Ich persönlich verwende gerne den Autoprefixer, welcher als Plugin Autoprefix CSS im Sublime Text-Editor verwendet werden kann (vorher sollte man node.js installieren).

Damit einem kleinen Test zwischendurch nichts im Wege steht, habe ich versucht, eine Webiste zu finden, welche den Autoprefixer auch online bereitstellt. So bin ich über ein interessantes jsFiddle mit verwendbarem Autoprefixer gestoßen. Rechts unten kommt der originale CSS-Code in die rote Spalte, in der grauen Spalte wird dann automatisch der mit Präfixen ausgestattete CSS-Code ausgegeben.

Allerdings bietet das jsFiddle keine Änderung der Einstellungen an, wie es z.B. beim Plugin für Sublime Text möglich wäre. In der Richtung habe ich dann nur noch http://autoprefixer.github.io gefunden, eine eigentlich russische Seite, deren Link ich hier aber gleich mit dem Google-Translator ausgestattet habe. Hier gibt es unten ein zusätzliches Textfeld, mit dem die Ausgabe des Autoprefixer so beeinflusst werden kann, dass sie auch noch mehr Präfixe als in der Standard-Einstellung generiert. So werden bspw. bei der Eingabe von "last 20 version" im Textfeld unten so gut wie alle bekannten Präfixe für die jeweiligen CSS-Eigenschaften ausgegeben, um möglichst viele Browser-Versionen abdecken zu können. Beim Standard "last 2 version" wird hingegen oftmals nur noch zusätzlich -webkit eingefügt, da Firefox in den neuesten Versionen oft auch alles präfixlos akzeptiert und Opera inzwischen seine Engine ebenfalls auf Webkit umgestellt hat und damit statt -o ebenfalls auf -webkit reagiert.


Mir gefällt am Autoprefixer ziemlich gut, dass er auch mit Kommentaren und auch Umlauten darin bestens umgehen kann (manche Generatoren schneiden Wörter an Umlauten einfach ab). Wichtig ist hier auch, dass die präfixlose Schreibweise immer hinter den anderen steht. Praktischerweise wählt Autoprefixer die Reihenfolge und Einrückungen so, dass sie gut lesbar sind und optisch eine Treppe bilden, damit das eigentliche Schlüsselwort immer schön untereinander steht.

Um das kurz mal zu demonstrieren, habe ich hier den CSS-Code für das Marquee mit den CSS3-Animationen einmal kurz durch den Autoprefixer gejagt.

Original-Code und Resultat nach Generierung:
(Einstellung auf 20 Versionen, nur um möglichst viele Präfixe zeigen zu können)

div.marquee {
	overflow: hidden;
	white-space: nowrap;
 
	line-height: 50px; /* Marquee-Höhe */
	animation: marquee 10s linear infinite alternate; /* enthält Dauer */
}
div.marquee:hover {
	animation-play-state: paused;
}
@keyframes marquee {
	from { text-indent:  101%;  } /* Beginne nach rechtem Rand */
	to   { text-indent:-3400px; } /* Max. Verschiebung nach links */
}
 

div.marquee {
	overflow: hidden;
	white-space: nowrap;
 
	line-height: 50px; /* Marquee-Höhe */
	-webkit-animation: marquee 10s linear infinite alternate;
	   -moz-animation: marquee 10s linear infinite alternate;
	     -o-animation: marquee 10s linear infinite alternate;
	        animation: marquee 10s linear infinite alternate; /* enthält Dauer */
}
div.marquee:hover {
	-webkit-animation-play-state: paused;
	   -moz-animation-play-state: paused;
	     -o-animation-play-state: paused;
	        animation-play-state: paused;
}
@-webkit-keyframes marquee {
	from { text-indent:  101%;  } /* Beginne nach rechtem Rand */
	to   { text-indent:-3400px; } /* Max. Verschiebung nach links */
}
@-moz-keyframes marquee {
	from { text-indent:  101%;  } /* Beginne nach rechtem Rand */
	to   { text-indent:-3400px; } /* Max. Verschiebung nach links */
}
@-o-keyframes marquee {
	from { text-indent:  101%;  } /* Beginne nach rechtem Rand */
	to   { text-indent:-3400px; } /* Max. Verschiebung nach links */
}
@keyframes marquee {
	from { text-indent:  101%;  } /* Beginne nach rechtem Rand */
	to   { text-indent:-3400px; } /* Max. Verschiebung nach links */
}
 

So ich habe nun die "Custom Marquess" nachgebaut und in verschiedenen Browsern ausprobiert. Die Demos auf der Seite funktionieren nicht, weil die Keyframes (Schlüssel-Positionen für die Animationen) wie bereits vermutet nur mit den Präfixen für Firefox und Chrome/Webkit geschrieben wurden. Während die Anleitung alles präfixlos beschreibt, wurden die Demos hingegen auf genau diese beiden Präfixe eingschränkt. Benutzt man konsequent die präfixlose Schreibweise, funktioniert es neben Firefox und Chrome dann auch wie gewünscht im IE 10/11.

Es funktioniert sogar ohne die Einbindung von -prefix-free. Um möglichst viele Browser abdecken zu können, habe ich die Bibliothek dennoch weiterhin aktiviert gelassen. An der Vorlage habe ich sonst nichts wesentliches geändert, außer dass die Animation beim Hovern auch angehalten werden kann.

Hier das ausführlich dokumentierte Beispiel:

Hallo Wolfgang,

alle mit CSS 2.1 kompatiblen Browser sollten diese Selektoren unterstützen.
Das Stichwort, welches du suchst, heißt "Kontext-Selektoren". In diesem Fall sind das die "Kind (>)"- und "Direkte Nachbar (+)"-Selektoren.


Hier findest du eine ganz gute Tabelle mit zusätzlichen weiterführenden Links:
http://www.w3.org/TR/CSS21/selector.html#pattern-matching

Eine deutsche Erklärung mit Beispiel-Schemas bietet diese Seite:
http://www.mediaevent.de/css/css-selekto...xtselektor.html
Oder alternativ mit HTML-Beispielen:
http://www.peterkropff.de/site/css/kontext_selektoren.htm

Die Browser-Kompatibilität und Statistiken kannst du bei "Can I use" einsehen:
http://caniuse.com/#search=adjacent%20sibling
(IE 6+7 werden erst nach Klick auf "Show all" eingeblendet.)