Werner: Emulation von :target im IE über Javascript

Hallo,
hat jemand Erfahrung mit der Emulation von :target für den IE?
Bei mir funktioniert es (im IE-Tester) in den Versionen 5,6,7 aber nicht mehr in den Versionen 8 und 9.
Hier das
Original-Beispiel
Schönen Gruß
Werner

  1. Hi,

    hat jemand Erfahrung mit der Emulation von :target für den IE?
    Bei mir funktioniert es (im IE-Tester) in den Versionen 5,6,7 aber nicht mehr in den Versionen 8 und 9.

    Laut Developer Tools im IE 8 bekommt das DIV-Element zwar die (zusätzliche) Klasse sftarget verpasst - aber die damit verbundenen CSS-Styles werden nicht angewendet.
    Das CSS-Tab der Developer Tools zeigt die Regel mit dem Selektor
    .comment:target, .sftarget
    auch gar nicht an - deshalb vermute ich, dass sich der IE hier beim Parsen des Stylesheets an der ihm unbekannten Pseudoklasse :target „verschluckt“, und die komplette Regel ignoriert.

    Ich würde versuchen, dass mal in zwei einzelne Regeln aufzuteilen - also aus
    .comment:target, .sftarget { ... }
    folgendes zu machen,

    .comment:target { ... }  
    .sftarget { ... }
    
    • in der Erwartung/Hoffnung, dass der Parser dann nur die erste Regel ignoriert, und die zweite als für ihn „ganz normal“ aussehende interpretiert wie gewünscht.

    MfG ChrisB

    --
    RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
    1. Om nah hoo pez nyeetz, ChrisB!

      Das CSS-Tab der Developer Tools zeigt die Regel mit dem Selektor .comment:target, .sftarget auch gar nicht an - deshalb vermute ich, dass sich der IE hier beim Parsen des Stylesheets an der ihm unbekannten Pseudoklasse :target „verschluckt“, und die komplette Regel ignoriert.

      dies kann ich bestätigen für

      foo::before, foo:before {...}

      also aufteilen.

      Matthias

      --
      Wer ein Problem beschreiben kann, hat es schon halb gelöst.                                             (Julian Huxley) http://www.billiger-im-urlaub.de/kreis_sw.gif
      1. @ChrisB and Matthias!
        Super, es funktioniert!
        Das ist dann wohl ein Fehler im IE8?
        Schönen Gruß
        Werner

        1. Hi,

          Das ist dann wohl ein Fehler im IE8?

          Nein.

          ~dave

          1. Hi,

            Das ist dann wohl ein Fehler im IE8?

            Nein.

            OK, verstanden.
            Was mich allerdings verwundert ist die Tatsache, dass die IE < IE8 es richtig interpretieren. Man könnte also sagen, IE8 ist strenger, allerdings damit nicht aufwärtskompatibel.
            Gruß
            Werner

            1. Om nah hoo pez nyeetz, Werner!

              Was mich allerdings verwundert ist die Tatsache, dass die IE < IE8 es richtig interpretieren. Man könnte also sagen, IE8 ist strenger,

              IE < 8 machen es halt falsch und IE > 7 richtig.

              allerdings damit nicht aufwärtskompatibel.

              Wie meinen?

              IE Matthias

              --
              Wer ein Problem beschreiben kann, hat es schon halb gelöst.                                             (Julian Huxley) http://www.billiger-im-urlaub.de/kreis_sw.gif
              1. Aber jetzt noch eine Frage an die - wie ich feststellen durfte - Spezialisten.
                Nachfolgendes Script läuft erst einmal einwandfrei.

                  
                sfTarget = function() {  
                	var sfEls=document.getElementsByTagName("H2");  
                	var aEls = document.getElementsByTagName("A");  
                	document.lastTarget = null;  
                	for (var i=0; i<sfEls.length; i++) {  
                		if (sfEls[i].id) {  
                			if (location.hash==("#" + sfEls[i].id)) {  
                				sfEls[i].className+=" " + cls;  
                				document.lastTarget=sfEls[i];  
                			}  
                			for (var j=0; j<aEls.length; j++) {  
                				if (aEls[j].hash==("#" + sfEls[i].id)) aEls[j].targetEl = sfEls[i]; aEls[j].onclick = function() {  
                					if (document.lastTarget) document.lastTarget.className = document.lastTarget.className.replace(new RegExp(" sftarget\\b"), "");  
                					if (this.targetEl) this.targetEl.className+=" sftarget"; document.lastTarget=this.targetEl;  
                					return true;  
                				}  
                			}  
                		}  
                	}  
                }  
                if (window.attachEvent) window.attachEvent("onload", sfTarget);
                

                Wenn ich aber die REFRESH-Taste klicke, kommt die Fehlermeldung
                "cls ist undefiniert".
                Ich selbst habe keine Ahnung von Javascript und möchte das Script daher möglichst unverändert verwenden (black box)
                Natürlich erwarte ich nicht, dass Ihr das Script testet, aber vielleicht erkennt Ihr auf Anhieb die Ursache.
                Gruß
                Werner

                1. Om nah hoo pez nyeetz, Werner!

                  sfEls[i].className+=" " + cls;

                  In dieser Zeile soll an alle class-Attribute der h2-Elemente der Wert der Variable "cls" angehängt werden. In dem Scriptausschnitt, den du lieferst, kommt die Zeichenfolge "cls" genau einmal vor, und zwar an dieser Stelle. Wenn es nicht vorher irgendeine Festlegung á la "cls = ..." gibt, ist "cls" tatsächlich undefiniert.

                  Ich vermute, dass die Klassenbezeichnung "cls" heißen soll, also würde ich einfach

                  sfEls[i].className+="  cls"; schreiben.

                  Dies ist natürlich hinfällig, falls es sich bei "cls" um eine Variable handelt, was aus dem Script allerdings nicht hervorgeht.

                  Matthias

                  --
                  Wer ein Problem beschreiben kann, hat es schon halb gelöst.                                             (Julian Huxley) http://www.billiger-im-urlaub.de/kreis_sw.gif
                  1. Hallo Matthias,

                    sfEls[i].className+="  cls"; schreiben.

                    Dies ist natürlich hinfällig, falls es sich bei "cls" um eine Variable handelt, was aus dem Script allerdings nicht hervorgeht.

                    Das gezeigte Script und dessen Aufruf sind komplett.
                    Habe es wie oben vorgeschlagen versucht und der Effekt ist weg.
                    Ob es andere Auswirkungen hat, konnte ich noch nicht feststellen.
                    Leider ist der Autor nicht mehr zu erreichen.
                    Dank für Deine Hilfe
                    Werner

            2. Hi,

              Was mich allerdings verwundert ist die Tatsache, dass die IE < IE8 es richtig interpretieren.

              eigentlich nicht: Richtig wäre es, die Regel zu ignorieren, weil ein Teil des Selektors unbekannt ist. IE6 und 7 "übersetzen" unbekannte Pseudoklassen in ":unknown", welches diesen Browsern - hört, hört! - bekannt ist :-)

              Man könnte also sagen, IE8 ist strenger, allerdings damit nicht aufwärtskompatibel.

              Könnte man. Man _sollte_ jedoch sagen, der IE8 ist (in dieser Hinsicht) standardkonform und _deshalb_ aufwärtskompatibel.

              Cheatah

              --
              X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
              X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
              X-Will-Answer-Email: No
              X-Please-Search-Archive-First: Absolutely Yes
    2. Hi,

      Das CSS-Tab der Developer Tools zeigt die Regel mit dem Selektor
      .comment:target, .sftarget
      auch gar nicht an - deshalb vermute ich, dass sich der IE hier beim Parsen des Stylesheets an der ihm unbekannten Pseudoklasse :target „verschluckt“, und die komplette Regel ignoriert.

      Dieses Verhalten ist auch absolut korrekt.
      "Malformed Statements", wozu im IE8 mangels Unterstützung :target zählt, sollen komplett ignoriert werden.

      FYI.

      ~dave

      1. Hi,

        Das CSS-Tab der Developer Tools zeigt die Regel mit dem Selektor
        .comment:target, .sftarget
        auch gar nicht an - deshalb vermute ich, dass sich der IE hier beim Parsen des Stylesheets an der ihm unbekannten Pseudoklasse :target „verschluckt“, und die komplette Regel ignoriert.

        Dieses Verhalten ist auch absolut korrekt.
        "Malformed Statements", wozu im IE8 mangels Unterstützung :target zählt, sollen komplett ignoriert werden.

        Als “malformed statement” würde ich das aber nicht unbedingt sehen, denn die Beispiele dort enthalten teils grobe Syntaxfehler.

        Besser passt m.E. 4.1.7 Rule sets, declaration blocks, and selectors:

        CSS 2.1 gives a special meaning to the comma (,) in selectors. However, since it is not known if the comma may acquire other meanings in future updates of CSS, the whole statement should be ignored if there is an error anywhere in the selector, even though the rest of the selector may look reasonable in CSS 2.1.

        For example, since the "&" is not a valid token in a CSS 2.1 selector, a CSS 2.1 user agent must ignore the whole second line, and not set the color of H3 to red:

        h1, h2 {color: green }
        h3, h4 & h5 {color: red }
        h6 {color: black }

        MfG ChrisB

        --
        RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
  2. Hallo,
    da habe ich mich auf etwas eingelassen!
    Da werben die Provider damit, wie einfach es ist, eine eigene Homepage zu erstellen.
    Aber wehe, man möchte etwas kreativ sein.
    Ich möchte jetzt folgendes realisieren:
    Wenn die Seite im IE aufgerufen wird, dann einen Javascript-Code einfügen - aber nur, wenn Javascript aktiviert ist, sonst einen Text einfügen.
    Den ersten Teil kriege ich noch hin (<!--[if IE> ......) aber dann hakt es.
    Ich hoffe dieser Beitrag wird noch gelesen und man kann mir einen Tipp geben.

    Schönen Gruß
    Werner

    1. Om nah hoo pez nyeetz, Werner!

      nur wenn javascript an ist, tu etwas ...

      • Gib dem body die Klasse "js-aus" (oder keine Klasse)
      • Der anzuzeigende Text ("JS wird benötigt") sei ein Element mit der ID "meineId"
      • Setze mit Javascript den Body auf die Klasse "js-an"

      Verwende im CSS die Selektoren

      .js-aus #meineId {display: block;} oder passend bzw. #meineId {display: block;} .js-an #meineId {display: none;}

      Matthias

      --
      Wer ein Problem beschreiben kann, hat es schon halb gelöst.                                             (Julian Huxley) http://www.billiger-im-urlaub.de/kreis_sw.gif
    2. @@Werner:

      nuqneH

      Den ersten Teil kriege ich noch hin (<!--[if IE> ......) aber dann hakt es.

      Der Haken an der Sache ist, dass du das http://de.selfhtml.org/html/transit/scripts.htm#noscript@title='noscript'-Element nicht kennst?

      Qapla'

      --
      Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
      (Mark Twain)