nocsript als "Conditional Comment"

**zonky** · 23.08.2010, 09:58

Hi,

ich habe in der Navigation einige Hover-Effekte, für die ich ein Fall-back per CSS machen möchte. Bisher habe ich keine Möglichkeit gefunden, wie ich die Pseudo-Klasse/Selector :hover per Mootols löschen kann.

Jetzt möchte ich das Fall-Back in eine extra CSS schreiben und per

Code:

<noscript>
  <link href="noscript.css" rel="stylesheet" type="text/css" />
</noscript>

einbinden - ich möchte natürlich auf den CSS-Editor nicht verzichten und dachte, ich kann einen eigenen "Conditional Comment" schreiben... wie und wo könnte ich das machen?

Mit Dank für Tipps!

zonky

**tril** · 23.08.2010, 16:15

Das wird leider so nicht gehen, denn in der Selectbox, wählst du nur die Bedingung des Conditional Comment aus, der Rest wird dazu generiert:

Code:

<!--[... condition ...]>...<![endif]-->

Ich hatte mir den Code vor kurzem mal angesehen gehabt.

Außerdem ist <noscript> ein Inhaltselement (!) das im Head nix verloren hat.
http://de.selfhtml.org/html/referenz...e.htm#noscript

Es gibt aber eine andere Möglichkeit, du fügst eine CSS Klasse (z.B. noscript auf die Wurzel deiner Navigation oder dem body) ein:

HTML-Code:

...
<body class="noscript">
...
</body>
...

Dann kannst du im CSS Code ein spezielles, auf No-Script optimiertes CSS einbauen, z.B.:

Code:

.noscript .navigation ul.level_1 li.level_1:hover ul.level_2 { display: block; }

Im JavaScript entfernst du einfach die CSS Klasse:

Code:

$(document.body).removeClass('noscript');

Grüße
Tristan

**psren** · 23.08.2010, 16:19

oder du machst eifach gegensätzliches und fügst einfach per JS die Klasse "script" hinzu...
und könntest somit dein bisheriges CSS ohne Änderungen weiternutzen.

**zonky** · 23.08.2010, 19:00

@tril

stimmt, mit dem Header... und die Funktion im Core habe ich auch entdeckt.

Leider bin ich im Plugin-Programmieren (noch) nicht so fit, dass ich die Sache hinbekommen könnte.

Der Tipp mit der body-class ist prima, werde ich nochmal überdenken - ich bin mir nicht sicher, ob ich dann per JS die Klasse killen kann, wg. des Pseudo-Selectors - siehe @psren

@psren
so mache ich das bei den meisten Elementen, wo ich per JS was "mache" aber ein Fall-Back per CSS haben möchte.

Problem: ich habe den Pseudo-Selector z.B.
#main a:hover {
background-color: #FFF;
}
und möchte aber per JS ein background-Fading bei "hover" haben, müsste ich den Pseudo-Selektor zurücksetzen.
... und genau dazu habe ich nix gefunden removeClass('a:hover') o.ä. geht m.E. nicht

Dank und Gruss

zonky

**psren** · 23.08.2010, 19:12

und sowas wie

Code:

.script *:hover

geht nicht??

**zonky** · 23.08.2010, 19:51

@psren

???hmm - was, wo, wie

**psren** · 23.08.2010, 22:08

es sollte doch funktionieren dem body die klasse "script" hinzuzufügen und dann als letztes im stylesheet mit dem selektor

Code:

.script *:hover

die hover effekte wieder zurückzusetzen...
auf standart, oder auf sonst irgendwas.

**zonky** · 23.08.2010, 22:48

o.k. - verstanden...

die Frage ist, ob bei removeClass('script') auch das :hover mit gekillt wird...

also wäre die Sache so gedacht oder?

CSS Standard
#main a:hover {background-color: transparent;}

in CSS als Fallback
#main .script a:hover {background-color:#FFF;}

in HTML
<div id="main" class="script"><a href=...></div>

in JS
$$('main').removeClass('script'); // Fallback löschen

$$('main a').addEvent.... // Hovereffekt machen

zonky