CSS + JavaScript Parsing Reihenfolge

Moin,

ich habe ein scheinbar sehr periphäres Problem, auf das ich mir persönlich noch nicht viel Reim machen kann.

Folgende Problematik:

Ich habe eine DropDown-Funktion auf einer Homepage realisiert, 1x für CSS und 1x mit JavaScript (jQuery Framework v1.4.4).

Ich habe festgestellt, dass die meisten Browser die CSS Variante nutzen und auf die Animation verzichten. Mich persönlich stört das nicht so sehr, aber die Frage, die sich mir stellt, ist, warum ist das so? Gibt es eine Möglichkeit die Animation zu bevorzugen, wenn JavaScript eh aktiviert ist? (schöner sieht das ja schon aus, ehrlich gesagt)

Mehr Input von mir:

Die Verhaltensweise der Browser:
[ul]
[li]Firefox 3.6.12: Führt 1x die CSS Variante aus, beim zweiten Rüberfahren mit der Maus die JS.[/li]
[li]IE 8: benutzt die JS Variante[/li]
[li]Opera/Safari/Chrome: CSS Variante - die Versionen der drei habe ich gerade nicht im Kopf[/li][/ul]

HTML Quelltext

<head>
// davor die CSS Dateien + Einbindung der jQuery Library 
  <script language="JavaScript">
  <!--
	$(document).ready(function(){
		$("#menu ul li").hover(
			function() {
				$("ul",this).stop(true,true).slideDown(1000);
			},
			function() { 
				$("ul",this).stop(true,true).slideUp(1000);
			});
	});
  -->
  </script> 
</head>
<body>
//[...]
<div id="menu">
					<ul>
						<li><a href="">Test 1</a>
								<div>
									<ul>
										<li><a href="">Sub</a></li>
										<li><a href="">Sub</a></li>
										<li><a href="">Sub</a></li>
										<li><a href="">Sub</a></li>
										<li><a href="">Sub</a></li>
									</ul>
								</div>
						</li>
// weitere li Elemente wie das Beispiel
</ul>

CSS Datei (ich lasse mal das Aussehen weg)

#menu { z-index:1;  }
#menu ul { z-index:2; }
#menu ul li { position:relative; }
#menu ul li a { display:block; }
#menu ul li a:hover { color:#FFFFFF; }
    
/* Level 1 */
#menu ul li ul { position:absolute; display:none; z-index:3; }
menu ul li a:hover ul,
#menu ul li:hover ul { display:block; }

MfG

K.A., dazu müsste man sich erst mal anschauen, was genau die Animation macht.

Dafür sorgen, dass die CSS-Selektoren in dem Fall gar nicht zutreffen.

Bspw. body eine Klasse “noJS” geben, und die in die Selektoren mit aufnehmen,

Wenn JS verfügbar ist, damit beim Laden body diese Klasse wegnehmen -> Selektor trifft nicht mehr zu -> CSS-Effekt „abgeschaltet“.

Bei Animationen mit SMIL ist die Reihenfolge jedenfalls eindeutig
festgelegt (kann man z.B. bei diversen Programmen verwenden,
die SVG darstellen können, bei (X)HTML ist SMIL allerdings weniger
beliebt).
Da beinflußt jedenfalls die Animation nicht die darunterliegenden
Werte, auch nicht, wenn die übers DOM modifiziert werden, sondern
die Animation ändert nur den Präsentationswert. Sichtbar wird da
also die Animation, nicht die DOM-Werte, welche unabhängig davon
erhalten und manipulierbar bleiben und von der Animation
nur als unterliegende Werte verwendet werden.

Ich meine, bei den CSS3-Modulen für Übergänge und Animationen
ist das ähnlich geregelt, mal abgesehen davon, daß das (noch?)
nicht so weit entwickelt ist und die Verwertung unterliegender
Werte etwa keine Rolle spielt.

Verwendet man SMIL oder CSS-Animation, braucht man ja auch
meist das DOM gar nicht zu manipulieren und Skripte sind nicht
notwendig.

DOM und CSS - soweit ich das verstanden habe, manipuliert das
Skript den Wert im DOM selbst. Ob man das sehen kann oder
nicht, hängt innerhalb der CSS-Regeln dann wohl von den
Spezifitäten ab. :hover etc haben eine hohe Spezifität, sollten also
den meisten anderen Kram überschreiben.

Wenn das Skript hingegen etwas manipuliert, was weder im
DOM vorhanden ist noch im CSS-DOM (- trifft das auf 'slideDown’
zu? -), so ist es durchaus plausibel, daß da niemand spezifiziert
hat, wie die Spezifitäten da sind, wenn es sich um interne
Probleme/Funktionen des browsers handelt und nicht um
Eigenschaften des Dokumentes oder der Stilvorlage.
Wenn du gezielt die CSS-Positionierung mit dem Skript änderst
(Eigenschaften left/right etc), sollten die Spezifitäten normal
gelten.

Moin,

ich habe das jetzt erstmal so umgesetzt, wie chrisb das vorgeschlagen hat.

Danke an hoffmann für die ausführlichen Gedanken. Ich werde mir das sicherlich nochmal näher anschauen.

Lieben Gruß

Was chrisb vorgeschlagen hat, ist ja eine Selektion, welche die
Spezifität hinreichend erhöht, paßt also als spezielle Lösung in
den Gedankengang, wenn man eine entsprechende Selektion
vornehmen kann. Es gibt ja auch Situationen, wo man den
(X)HTML-Quelltext nicht verändern kann oder mag (weil das
inhaltlich nicht sinnvoll ist etwa), da muß man sich das genauer
ansehen. Hinsichtlich möglicher Fehler von browsern ist eine
einfache Methode der Selektion, die man einfach erreichen kann,
indem man im (X)HTML-Quelltext Identifizierer oder Klassen
hinzufügt, natürlich stabiler.