CSS-Funktionalität per Javascript abfragen

[MudGuard]

Hi,

es wird hier ja immer wieder propagiert, daß in Javascript nicht der Browser abgefragt werden soll, sondern die Tatsache, ob er eine bestimmte Fähigkeit unterstützt.

Ok, mach ich auch normalerweise so. Ist ja auch kein Problem, solange es sich um eine Javascript-Funktionalität handelt.

Wie aber frage ich im Javascript ab, ob der Browser eine bestimmte CSS-Funktionalität beherrscht?
Konkret geht es darum, ob der Browser :hover für nicht-Links unterstützt.

Im Moment hab ich das jetzt doch mal per "Browserabfrage" gelöst:

if ((document.all && !window.opera) || (document.layers))  
    alert("Browser zu dumm für img:hover");  

Sprich: da ich weiß, daß Netscape uralt und IE das nicht können, fische ich die eben über mir bei diesen Browsern bekannte bzw. unbekannte Javascript-Objekte raus.

Beim IE 7 könnte sich das aber ändern. Also müßte der dann wieder extra rausgefiltert werden. Bei Opera gibt es wahrscheinlich auch irgendwelche uralte Versionen, die das nicht unterstützen.
Da müßte also eigentlich noch ne Prüfung auf die Version mit rein.

Oder aber das machen, was ich eigentlich will:
Nämlich ein

if (! navigator.supportsHoverOnAllElements())  
    alert("Browser zu dumm für img:hover");

Aber soweit ich weiß, gibt es keine solche Funktion. Oder liege ich da falsch?

cu,
Andreas

[Ashura]

Hallo MudGuard.

Wie aber frage ich im Javascript ab, ob der Browser eine bestimmte CSS-Funktionalität beherrscht?

Mit dieser Frage hast du sicher gerechnet: Warum meinst du dies tun zu müssen?

Einen schönen Samstag noch.

Gruß, Ashura

[MudGuard]

Hi,

Wie aber frage ich im Javascript ab, ob der Browser eine bestimmte CSS-Funktionalität beherrscht?
Mit dieser Frage hast du sicher gerechnet: Warum meinst du dies tun zu müssen?

Um das Javascript nur für die Browser auszuführen, die das per CSS nicht hinbekommen.

cu,
Andreas

[molily]

Hallo,

Wie aber frage ich im Javascript ab, ob der Browser eine bestimmte CSS-Funktionalität beherrscht?
Konkret geht es darum, ob der Browser :hover für nicht-Links unterstützt.

Ich denke mal, du willst mit JavaScript die :hover-Funktionalität nachbauen.
Wahrscheinlich machst du es dir nur viel schwerer, wenn du zusätzlich zur :hover-Logik auch noch eine Browsererkennung programmierst. Du kannst erst dann wissen, ob :hover funktioniert, wenn der Hover eintritt. In dem Moment des Mouseovers kannst du mit JavaScript abfragen, ob die :hover-Regel angewendet wurde und sich die faktischen CSS-Eigenschaftswerte (currentSTyle, getComputedStyle) geändert haben. Dann kannst du entscheiden, ob du per JavaScript manuell eine Klassenänderung o.ä. vornehmen musst. (Man könnte natürlich auch andere Indikatoren verwenden, etwa mit body:hover irgendeine irrelevante Eigenschaft setzen, deren Änderung man mit JavaScript abfragen kann.)

Die Event-Handler musst du bei den relevanten Elementen (oder beim document-Objekt, wo alle Events vorbeikommen) sowieso registrieren. Warum also nicht alles mit JavaScript lösen, solange es solche Browser gibt? Oder du denkst dir wie beschrieben eine saubere Logik aus, die überprüft, ob die :hover-Styles bereits angewendet wurden und im negativen Falle noch einmal eingreift.

Mathias

[MudGuard]

Hi,

Wie aber frage ich im Javascript ab, ob der Browser eine bestimmte CSS-Funktionalität beherrscht?
Konkret geht es darum, ob der Browser :hover für nicht-Links unterstützt.

Ich denke mal, du willst mit JavaScript die :hover-Funktionalität nachbauen.

Nö, da soll was ganz anderes geschehen (nicht meine Idee, der Auftraggeber wünscht es so).
Denn wenn es so wäre, könnte ich per onmouseover/onmouseout einfach die Eigenschaften setzen/zurücksetzen, die per :hover im stylesheet gesetzt werden ...

Wahrscheinlich machst du es dir nur viel schwerer, wenn du zusätzlich zur :hover-Logik auch noch eine Browsererkennung programmierst. Du kannst erst dann wissen, ob :hover funktioniert, wenn der Hover eintritt. In dem Moment des Mouseovers kannst du mit JavaScript abfragen, ob die :hover-Regel angewendet wurde und sich die faktischen CSS-Eigenschaftswerte (currentSTyle, getComputedStyle) geändert haben.

Interessante Idee, das mit dem computedStyle. Aber das greift ja, wie Du sagst, erst, wenn der :hover- bzw. onmouseover-Fall bereits eingetreten ist.

Dann kannst du entscheiden, ob du per JavaScript manuell eine Klassenänderung o.ä. vornehmen musst. (Man könnte natürlich auch andere Indikatoren verwenden, etwa mit body:hover irgendeine irrelevante Eigenschaft setzen, deren Änderung man mit JavaScript abfragen kann.)

Auch bei body:hover tritt das Ereignis erst auf, wenn sich die Maus über dem Viewport befindet - was aber z.B. bei einem Aufruf der Seite aus einer Mail oder aus den Bookmarks usw. wesentlich später eintreffen kann als onload (Maus bleibt erstmal auf dem Mailprogramm/der Favoriten-Leiste) ...

Dann werd ich wohl doch dabei bleiben (müssen), die Browser zu erkennen statt ihrer Fähigkeiten.

Die Event-Handler musst du bei den relevanten Elementen (oder beim document-Objekt, wo alle Events vorbeikommen) sowieso registrieren. Warum also nicht alles mit JavaScript lösen, solange es solche Browser gibt? Oder du denkst dir wie beschrieben eine saubere Logik aus, die überprüft, ob die :hover-Styles bereits angewendet wurden und im negativen Falle noch einmal eingreift.

Wenn's da nur nach mir ginge ...

cu,
Andreas

[Cybaer]

Hi,

Wie aber frage ich im Javascript ab, ob der Browser eine bestimmte CSS-Funktionalität beherrscht?

Try & error oder mit typeof.

Beim "hand/pointer-Problem" (gleiche Eigenschaft mit unterschiedlichen Werten) gehe ich z.B. so vor:

with(this.style) {
  cursor="hand";
  if(cursor!="hand") {
   cursor="pointer";
  }
 }

(wobei ich die Meldung beim neuen Moz einfach in Kauf nehme)

Beim "float-Problem (unterschiedliche Eigenschaften mit gleichen Werten) so:

attrib=((typeof(obj.cssFloat)=="undefined")?"style":"css")+"float";

(Wenn Browser cssFloat nicht unterstützt, verwendet der Browser halt styleFloat - mal davon ausgehend, daß jeder CSS-fähige Browser auch float unterstützt. ;-))

Gruß, Cybaer