nicht angemeldet
Kluge Lösung für JavaScript-abhängiges CSS?
0 
Gunnar Bittersmann
0 1 0
Kluge Lösung für JavaScript-abhängiges CSS?
AugeHallo!
Um CSS-Vorlagen zu laden, die nur bei aktivem Javascript benötigt werden (Inhalte verbergen, um Einblend-Effekte zu realisieren, Overlay-Positionierungen, etc.), habe ich bis jetzt immer folgende Methode im Kopf verwendet:
<script type="text/javascript">
document.write('<link href="ajax.css" rel="stylesheet" type="text/css" />');
</script>
Das funktioniert super auf sämtlichen Browsern. Nur ist es laut XML-Checker nicht XHTML-valide. Oder doch? Und wenn nicht: Gibt es da eine elegante Lösung ohne große Umwege?
Vielen Dank und beste Grüße!
-
@@Paracetamol:
Und wenn nicht: Gibt es da eine elegante Lösung ohne große Umwege?
Externes Stylesheet laden NUR wenn JS aktiv
Live long and prosper,
Gunnar--
Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau) -
Hallo!
Du kannst den Befehl
document.write('<link href="ajax.css" rel="stylesheet" />');
einfach in eine Externe Datei auslagern und diese im head aufrufen.
Grüße von Andrea
-
Hi,
Um CSS-Vorlagen zu laden, die nur bei aktivem Javascript benötigt werden (Inhalte verbergen, um Einblend-Effekte zu realisieren, Overlay-Positionierungen, etc.), habe ich bis jetzt immer folgende Methode im Kopf verwendet:
wenn der CSS-Code nicht allzu umfangreich wird, ergänze einfach mit JavaScript den <body> um eine Klasse wie "jsEnabled" und selektiere dann danach.
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-
@@Cheatah:
ergänze einfach mit JavaScript den <body> um eine Klasse wie "jsEnabled"
Oder noch weiter oben: das 'html'-Element.
Sehr sehr schnelle Seiten - Website Performance Best Practice - Teil 2
Live long and prosper,
Gunnar--
Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)-
Hi,
ergänze einfach mit JavaScript den <body> um eine Klasse wie "jsEnabled"
Oder noch weiter oben: das 'html'-Element.sicher, allerdings kennt das <html>-Element kein class-Attribut - ich würde mich also nicht darauf verlassen wollen, dass die Rendering-Engine eine entsprechende className-Eigenschaft auswertet.
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-
Hi,
sicher, allerdings kennt das <html>-Element kein class-Attribut - ich würde mich also nicht darauf verlassen wollen, dass die Rendering-Engine eine entsprechende className-Eigenschaft auswertet.
Das ist doch mal wieder typisch vom W3C. Ich habe hier im Forum zum erstem Mal erfahren, das man auch dem html-element CSS-Anweisungen geben kann. Und das war auch sehr sinnvoll, da body nicht unbedingt immer die Ausmaße annimnt die man erwartet. Nur hatt e man sowas in den ganzen frühen Jahren nie gehört und alle Tutorien fingen erst beim <body> richtig an, mal die Anweisungen im headbereich ausser Acht gelassen. Irgendwann, wüsste auch gerne mal ab wann, beschloss wohl irgend jemand body != html denn <html> eine Etage höheres Element. Aber warum dann so inkonsequent?
Nun, ich war damals sehr überrascht, das dies möglich ist und stellte in Folge meine CSS natürlich darauf ein. Nun lese ich jetzt hier <html> erlaubt keine class. Möchte manchmal gerne mal wissen wie die zu ihren Ideen kommen.
Hans
-
Hi,
Ich habe hier im Forum zum erstem Mal erfahren, das man auch dem html-element CSS-Anweisungen geben kann.
Kannst du ja auch weiterhin, niemand hindert dich daran.
Nun, ich war damals sehr überrascht, das dies möglich ist und stellte in Folge meine CSS natürlich darauf ein. Nun lese ich jetzt hier <html> erlaubt keine class.
Ja und? Es existieren andere Selektoren, die das html-Element erfassen.
MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“-
Hi,
Ja und? Es existieren andere Selektoren, die das html-Element erfassen.
Ja das ist klar, also warum dann nicht gleich class abschaffen, geht schliesslich alles auch mit anderen Selektoren?
Mir ginges eher darum zu erfahren, welche Begründung es geben könnte warum
man einerseits das <html> als gestallterisches Element ansieht, andererseits eine Gleichstellung mit anderen Elemeten in dieser Hinsicht unterbindet.Hans
-
Hi,
Ja das ist klar, also warum dann nicht gleich class abschaffen, geht schliesslich alles auch mit anderen Selektoren?
nein, geht es nicht: Es kann beliebig viele <p>-, <kbd>-, <abbr>-, <blockquote>-Element usw. geben, aber immer nur ein <html>-Element. Als Root- und Viewport-Element hat es zwangsläufig eine Sonderbedeutung, die es beispielsweise von <body> unterscheidet. Das class-Attribut hat also weiterhin seinen Sinn, der jedoch bei <html> nicht zutrifft.
Mir ginges eher darum zu erfahren, welche Begründung es geben könnte warum
man einerseits das <html> als gestallterisches Element ansieht,Tut man nicht. Es gibt in HTML keine gestalterischen Elemente.
andererseits eine Gleichstellung mit anderen Elemeten in dieser Hinsicht unterbindet.
Das class-Attribut hat ebenfalls nichts mit Gestaltung zu tun. Es *klassifiziert* Elemente, vermittelt also zusätzliche, über den Standardumfang von HTML hinausgehende Semantik, die der Autor selbst definieren kann.
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-
Yerf!
Das class-Attribut hat ebenfalls nichts mit Gestaltung zu tun. Es *klassifiziert* Elemente, vermittelt also zusätzliche, über den Standardumfang von HTML hinausgehende Semantik, die der Autor selbst definieren kann.
Aber weshalb sollte man komplette Dokumente nicht klassifizieren dürfen? (Das wäre ja die Angabe einer Class in <HTML>)
Wenn man auf verschiedenen Seiten unterschiedliche Formatierungen für das HTML-Element benötigt bedeutet dies zur Zeit, dass man unterschiedliche Stylesheets einbinden muss. (Oder man benutzt XHTML und gibt dem HTML-Element eine ID) Aber rein von der Semantik her würde ich hier trotzdem Class bevorzugen.
Gruß,
Harlequin
--
<!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->-
Hallo
Das class-Attribut hat ebenfalls nichts mit Gestaltung zu tun. Es *klassifiziert* Elemente, vermittelt also zusätzliche, über den Standardumfang von HTML hinausgehende Semantik, die der Autor selbst definieren kann.
Aber weshalb sollte man komplette Dokumente nicht klassifizieren dürfen? (Das wäre ja die Angabe einer Class in <HTML>)
Du siehst das aus der Projektsicht (mehrere Dokumente die verschieden klassifiziert werden), das W3C aus der Dokumentensicht. Da gibt es im Dokument eben nur *ein* Element <html>, für das eine Klassifizierung irgendwie unsinnig ist.
Davon abgesehen scheint mir hier ein rein CSS-seitiger Blickwinkel vorzuherrschen. Klassen sind von CSS unabhängig, es ist eine HTML-Technik. Sie werden aber in CSS, wie übrigens auch in anderen Techniken (z.B. JavaScript), als bereits bestehende Infrastruktur benutzt.
Tschö, Auge
-
Yerf!
Du siehst das aus der Projektsicht (mehrere Dokumente die verschieden klassifiziert werden), das W3C aus der Dokumentensicht. Da gibt es im Dokument eben nur *ein* Element <html>, für das eine Klassifizierung irgendwie unsinnig ist.
Bei Hypertext, dass darauf beruht mehrere Dokumente untereinander zu verlinken, sich bei der Betrachtung von Auszeichnungsmöglichkeiten auf *ein* Dokument zu beschränken ist irgendwie... inkonsistent.
Davon abgesehen scheint mir hier ein rein CSS-seitiger Blickwinkel vorzuherrschen. Klassen sind von CSS unabhängig, es ist eine HTML-Technik. Sie werden aber in CSS, wie übrigens auch in anderen Techniken (z.B. JavaScript), als bereits bestehende Infrastruktur benutzt.
Von der Seite her könnte man tatsächlich sagen, dass eine Klassifizierung von Dokumenten bereits über META-Elemente möglich ist.
Gruß,
Harlequin
--
<!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->-
Hallo
Du siehst das aus der Projektsicht (mehrere Dokumente die verschieden klassifiziert werden), das W3C aus der Dokumentensicht. Da gibt es im Dokument eben nur *ein* Element <html>, für das eine Klassifizierung irgendwie unsinnig ist.
Bei Hypertext, dass darauf beruht mehrere Dokumente untereinander zu verlinken, sich bei der Betrachtung von Auszeichnungsmöglichkeiten auf *ein* Dokument zu beschränken ist irgendwie... inkonsistent.
Jahahaha, *mehrere* Dokumente, die untereinander verlinkt werden. Sie bleiben jedoch verschiedene *einzelne Dokumente*.
Davon abgesehen scheint mir hier ein rein CSS-seitiger Blickwinkel vorzuherrschen. Klassen sind von CSS unabhängig, es ist eine HTML-Technik. Sie werden aber in CSS, wie übrigens auch in anderen Techniken (z.B. JavaScript), als bereits bestehende Infrastruktur benutzt.
Von der Seite her könnte man tatsächlich sagen, dass eine Klassifizierung von Dokumenten bereits über META-Elemente möglich ist.
<meta keywords="">wäre der Kandidat zur Verschlagwortung und<meta descritpion="">zur Beschreibung. Die sind altbekannt, könnten so einem gewissermaßen neuen (projektinternen) Zweck zugeführt werden, obwohl sie da auch nur das machen, was sie sowieso machen.Tschö, Auge
-
-
Hi,
Du siehst das aus der Projektsicht (mehrere Dokumente die verschieden klassifiziert werden), das W3C aus der Dokumentensicht. Da gibt es im Dokument eben nur *ein* Element <html>, für das eine Klassifizierung irgendwie unsinnig ist.
ja und warum ist es dann bei <body> nicht unsinnig, oder gibts derer mehrere?
Ich sehe das so, früher galt: ab body beginnt designauszeichnung.
Jetzt gilt ab html obwohl dazwischen noch der headbereich liegt.Also entweder oder, damit meine ich wenn schon html in die Designgeschichte mit reinbringen dann ganz oder gar nicht oder html lediglich als dom element gelten lassen um Strukturveränderungen hervorzurufen aber Design beginnt dann halt erst wie früher bei body.
Eine Frage konnte bisher nicht beantwortet werden, seit wann begann man das HTML-Element in Stylesheets zu beachten? Damit meine ich jetzt praktisch nicht theoretisch. Für die meissten hier dürfte das nämlich früher nicht in Frage gekommen sein.
Hans
-
Hallo
Du siehst das aus der Projektsicht (mehrere Dokumente die verschieden klassifiziert werden), das W3C aus der Dokumentensicht. Da gibt es im Dokument eben nur *ein* Element <html>, für das eine Klassifizierung irgendwie unsinnig ist.
ja und warum ist es dann bei <body> nicht unsinnig, oder gibts derer mehrere?
Nein, nur ein <body> je Dokument. Diese Frage ist durchaus zulässig.
Ich sehe das so, früher galt: ab body beginnt designauszeichnung.
Jetzt gilt ab html obwohl dazwischen noch der headbereich liegt.Das ist eine falsche Sicht auf die Struktur. Der
<head>liegt nicht zwischen<html>und<body>sondern "gleichberechtigt" *neben*<body>*in*<html>.Für die meissten hier dürfte das [<html> mit CSS ansprechen] nämlich früher nicht in Frage gekommen sein.
Die Zuweisung von
margin:0;,padding:0;und der grundsätzlichen Schrift- und Hintergrundfarbe sowohl anbodyals auch anhtmlals Rückfallebene für krude Auslegungen durch Browser ist *mir* schon irgendwo zwischen 4 und 6 Jahren geläufig.Tschö, Auge
-
-
-
Aber weshalb sollte man komplette Dokumente nicht klassifizieren dürfen? (Das wäre ja die Angabe einer Class in <HTML>)
Nein, das wäre Unsinn.
class kennzeichnet Zugehörigkeit eines Elements zu einer Klasse von Elementen eines Dokuments.
Wenn du nun das gesamte Dokument zu einer Klasse von Dokumenten gezählt werden soll - das liegt einfach außerhalb der logischen Definition von Klassen in HTML.(Oder man benutzt XHTML und gibt dem HTML-Element eine ID) Aber rein von der Semantik her würde ich hier trotzdem Class bevorzugen.
ID gibt einem dokumentweit eindeutigen Element einen Namen.
Genau das will man, wenn man dem gesamten Dokument einen Namen geben will.
Dass der nun in Hinsicht auf andere Dokumente nicht eindeutig ist, sondern eine Klasse von Dokumenten bildet - das erfasst die Logik von ID nicht.
Also ist ID durchaus passend.Mathias
-
-
@@Cheatah:
nein, geht es nicht: Es kann beliebig viele <p>-, <kbd>-, <abbr>-, <blockquote>-Element usw. geben, aber immer nur ein <html>-Element. Als Root- und Viewport-Element hat es zwangsläufig eine Sonderbedeutung, die es beispielsweise von <body> unterscheidet.
Ähm, der Unterschied in der Anzahl der je Dokument erlaubten 'html'- und 'body'-Elemente wäre welcher?
Es ist nicht einzusehen, dass das 'body'-Element ein 'class'-Attribut bekommen darf, das 'html'-Element jedoch nicht.*
Das class-Attribut hat also weiterhin seinen Sinn, der jedoch bei <html> nicht zutrifft.
Veto. Es hat für 'html' nicht mehr und nicht weniger Sinn als für 'body'.
Und wenn man nun JavaScript-abhängige CSS-Regeln für Elemente außerhalb des 'body' angeben will? Dann steht man ohne '@class' für 'html' ziemlich dumm da.
Das class-Attribut […] vermittelt also zusätzliche, über den Standardumfang von HTML hinausgehende Semantik, die der Autor selbst definieren kann.
Eben. Warum sollte einem Autor dies beim 'html'-Element verwehrt werden?
Live long and prosper,
Gunnar* Und ja, ich hatte es verwechselt. Meine trübe Erinnerung sagte mir, 'html' dürfe '@class' haben, nicht jedoch '@id'. Es ist andersrum – jedenfalls in XHTML 1.0. In HTML 4.01 weder das eine noch das andere.
--
Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)
-
-
-
-
-
-
Hi,
ergänze einfach mit JavaScript den <body> um eine Klasse wie "jsEnabled"
Oder noch weiter oben: das 'html'-Element.
Wobei html laut HTML 4.01 eigentlich kein class-Attribut besitzt.
Es "funzt" zwar trotzdem, ist ab er eigentlich nicht korrekt.Allerdings oftmals natuerlich bequemer, weil man auf document.documentElement "sofort" zugreifen kann, zum fruehesten Zeitpunkt, wo JavaScript-Code ausgefuehrt werden kann, auf document.body aber erst, wenn dieser auch "vorhanden" ist.
MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“
-
-
-
So, danke für die Hinweise, vor allem zu diesem Beitrag mit demselben Thema.
Auf die Methode mit js-Klassen wollte ich eigentlich verzichten, es gibt dafür aber ein nützliches Script, daß nicht nur Browser-Versionen und Rechnertypen, sondern auch angeschaltetes Javascript im CSS abrufbar macht, den CSS Browser Selector.