CSS3 *Target* IE workaround

[Reinhold Gabler]

Ja also, hallo erstmal...

...und danke an alle, die sich dieser Sache [ernsthaft] annehmen.

Ich bin derzeit dabei, ein Toggle Menü auf CSS3-Basis nach Vorbild der auf http://jsfiddle.net/hXZqZ/ vorgestellten Methodik umzusetzen, welche im IE (wie ja leider so oft) nicht funktioniert (ewas verwundert musste ich diesbezüglich feststellen, dass der CSS3 :target Selector entgegen anders lautenden Ausführungen auf w3schools.com, aber auch anderen namhafte Quellen, nicht nur nicht vom IE8 (und niedriger), sondern offensichtlich auch vom IE9 NICHT so ohne Weiteres akzeptiert wird. So funktioniert die in obengenannter Quelle vorgestellte Methodik im IE Version 9.0.8112.16421 eben NICHT).

Gängige "Workaround-Lösungen" (z.B. Selectivizr) sehen die Integration des Funktionsumfangs des CSS3 :target Selectors nicht vor, deswegen meine Frage: welche Workaround-Lösung bietet sich in diesem Falle für den IE (absteigend bis Version 8) an?

Vielen Dank,
Reinhold.

[molily]

Hallo,

welche Workaround-Lösung bietet sich in diesem Falle für den IE (absteigend bis Version 8) an

Das geht nur mit JavaScript.

Die Anwendbarkeit von :target ist sehr begrenzt und die Verwendung von :target, um Inhalte in einem »Akkordeon« einzublenden und andere per display: none auszublenden, hat viele Schwächen.

Es lässt sich mit JavaScript nicht ohne weiteres testen, ob der Browser :target wie gewünscht unterstützt. Eine entsprechende Feature-Abfrage und darauf aufbauend einen ordentlichen Fallback zu programmieren ist daher schwierig. Eine JavaScript-Lösung für alle Browser hingegen kann sehr robust sein.

Wichtig ist z.B., die Inhalte nicht mit display: none, sondern für Screenreader zugänglich zu verstecken.

Grüße
Mathias

[Reinhold Gabler]

Ok, erstmals vielen Dank für diesen Hinweis...

Habe mich also etwas mit Javascript beschäftigt und folgenden Code zusammengemurkst, der aber leider nicht funktioniert:

  
<script type="text/javascript">  
  
var toggle = 0;  
  
function myFunction() {  
	if (toggle == 0) {  
		toggle = 1;  
		document.getElementsByClassName("test").style.color = "#FFFF00"; // gelb  
} else {  
	  
   document.document.getElementsByClassName("test").style.color = "#FF0000"; // rot  
toggle = 0;  
}  
  
</script>  

<div class="test">Test <a href="" class="test" onclick="myFunction()">test</a> Test</div>

Meiner Meinung nach müssten sich sowohl der Link, als auch der restliche Inhalt des <div> nun per Mausklick abwechselnd gelb und rot färben.

Der Grundgedanke dahinter:
Da die :target Methode ja nicht zuverlässig funktioniert, muss ich wohl oder übel die styles via Javascript ansprechen (im Endresultat entscheiden selbige dann über sichtbar bzw. nicht sichtbar; in diesem Testlauf geht es einmal rein um einen Farbwechsel des darzustellenden Inhalts). Ich kreiere also eine Variable ("toggle") und setze selbige auf 0.
Die Funktion myFunction() färbt alle Inhalte des <div> Elements gelb ein und setzt die Variable toggle auf den Wert 1. Ist die Variable toggle schon auf Wert 1, so kommt das else Statement zu tragen, welches die Inhalte des <div> Elements wiederum rot einfärbt und die Variable wieder auf 0 setzt.

Soweit meine naive Vorstellung, funktioniert aber leider nicht.

Wo ist mein Denkfehler?

LG,
R.

[molily]

Hallo,

document.getElementsByClassName("test").style.color = "#FFFF00"; // gelb

getElementsByClassName gibt eine Liste von Elementen zurück, da viele Elemente dieselbe Klasse haben können.

Diese Liste selbst hat kein .style.color, sondern die einzelnen Elemente in der Liste. Daher sollte obige Code auch eine Fehlermeldung in der JavaScript-Konsole auslösen (vermutlich »TypeError: Cannot read property 'color' of undefined«). Man sollte immer auf der Fehlerkonsole nachschauen, wenn Code nicht wie gewünscht funktioniert. Die Developer-Tools mit der JavaScript-Konsole aktiviert man in den meisten Browsern mit der Taste F12.

Siehe auch JavaScript: Arbeitstechniken und Entwicklerwerkzeuge.

Listen kannst du z.B. mit einer konventionellen http://de.selfhtml.org/javascript/sprache/schleifen.htm@title=for-Schleife durchlaufen:

var elements = document.getElementsByClassName('test');  
for (var i = 0, l = elements.length; i < l; i++) {  
  var element = elements[i];  
  // Mach was mit element  
  element.style.color = 'red';  
}

Für die toggle-Variable eignet sich übrigens der Boolean-Typ mit den Werten true und false besser als eine Zahl.

Grüße
Mathias

[Reinhold Gabler]

Danke für die schnelle Auskunft! *thumbup*

Habe versucht, den Code entsprechend zu implementieren, leider ergebnislos :(

  
  
<script type="text/javascript">  
  
var toggle = 0;  
var elements = document.getElementsByClasses("test");  
  
function myFunction() {  
	if (toggle == 0) {  
		toggle = 1;  
		for (var i = 0, l = elements.length; i < l; i++) {  
		var element = elements[i];  
		element.style.color = "#FFFF00"; // gelb  
		}  
			  
} else {  
	toggle = 0;  
   element.style.color = "#FF0000"; // rot  
}  
  
</script>  
  

[um die Boolean Option kümmre ich mich später, ein Problem nach dem anderen ;) ]

So wie ich den dankenswerterweise zur Verfügung gestellten Code interpretiere, drückt die Variable 'element' zwar die Anzahl aller existierender "test"-Klassen-Elemente aus (nämlich [i]), spricht diese aber nicht explizit an, liegt darin der Grund weswegen der Code nicht funktioniert?

LG,
R.

[JürgenB]

Hallo Reinhold,

Habe versucht, den Code entsprechend zu implementieren, leider ergebnislos :(

das ist auch kein Wunder:

• die Variable element ist im else-Zweig nicht definiert
• ich zähle 4 mal "{", aber nur drei mal "}".

Gruß
Jürgen

[MudGuard]

Hi,

var elements = document.getElementsByClasses("test");

wo kommt diese Funktion her? Warum verwendest Du nicht getElementsByClassName?

function myFunction() {
if (toggle == 0) {
toggle = 1;
for (var i = 0, l = elements.length; i < l; i++) {
var element = elements[i];
element.style.color = "#FFFF00"; // gelb
}

} else {
toggle = 0;
   element.style.color = "#FF0000"; // rot
}

Bei Deiner seltsamen Einrückungsart ist es schwer, nachzuvollziehen, ob alle Klammern auch wieder geschlossen werden. Sogar für Dich ...

Außerdem: falls toggle == 0 ist, durchläufst Du in einer Schleife alle Elemente, um sie umzufärben.

falls toggle != 0 ist, wird nur ein (nicht-definiertes) Element umgefärbt.

cu,
Andreas

[Reinhold Gabler]

Ok, sorry, ich habe den Code entwirrt, nun sollte zumindest die Syntax stimmen... ;)

Was ich nun gerne hätte (und was das Script leider immer noch nicht tut), ist dass alle Elemente der Klasse "test" gelb sind, um dann mit dem Befehl "onClick" abwechselnd zwischen gelb und rot zu schalten. Kann mir da irgendwer weiterhelfen?

  
<script type="text/javascript">  
  
var toggle = 0;  
var elements = document.getElementsByClassName("test");  
  
function myFunction () {  
	if (toggle == 0) {  
		toggle = 1;  
		for (var i = 0, l = elements.length; i < l; i++) {  
			var element = elements[i];  
			element.style.color = "#FFFF00"; // gelb  
		}	  
	}  
	else {  
		toggle = 0;  
		for (var i = 0, l = elements.length; i < l; i++) {  
			var element = elements[i];  
			element.style.color = "#FF0000"; // rot  
		}  
	}  
}  
  
</script>  

Danke,
R.