CSS mit javascript

[Georg Unterberger]

hallo,

ich versuche eine javascript api aufzubauen, welche auf mobile geräte zugeschnitten ist, was bedeutet es soll den datentransfer minimieren, performance steigern, und auch im offline modus funktionieren. die api ist eigentlich mehr oder wehniger fertig, nur fehlt nur noch eine sache: es wäre sinnlos im head einen <link...> tag einzusetzen welcher auf eine css datei zeigt, da diese bei bestehender verbindung vom server geladen werden sollen, und bei keiner verbindung aus der lokalen datenbank. also muss die css datei schon mal über eine von mir gebaute funktion geladen werden, welche genau das übernimmt. so nun (endlich) mein problem: ich sitze nun fest mit dem inhalt der css datei, nur schaffe ich es nicht diese einzufügen, und die schritt für schritt zerlegung wäre nicht effizient genug.

var styles_to_insert = "...";  
var myStyle = document.createElement("link");  
//geht auch nicht mit createElement("style");....  
myStyle.setAttribute("rel", "stylesheet");  
myStyle.setAttribute("type" , "text/css");  
myStyle.setAttribute("media","all");  
myStyle = document.getElementsByTagName("head")[0].appendChild(myStyle);  
  
//problem: es kann immer nur ein selector{prop} eingefügt werden  
myStyle.insertRule(styles_to_insert,0);  
//funtioniert überhaupt nicht habe auch schon mit innerHTML und innerText und create textnode probiert  
myStyle.cssText = styles_to_insert;  

hat jemand eine idee wie man das lösen kann?

grüße aus Italien
Georg

[Gunther]

Hallo Georg,

ich versuche eine javascript api aufzubauen, welche auf mobile geräte zugeschnitten ist, was bedeutet es soll den datentransfer minimieren, performance steigern, und auch im offline modus funktionieren.

wie wär's mit http://diveintohtml5.org/offline.html?

Gruß Gunther

[wurzelbert]

servus Georg,

[code lang=javascript]var styles_to_insert = "...";
var myStyle = document.createElement("link");
//geht auch nicht mit createElement("style");....
myStyle.setAttribute("rel", "stylesheet");
myStyle.setAttribute("type" , "text/css");
myStyle.setAttribute("media","all");
myStyle = document.getElementsByTagName("head")[0].appendChild(myStyle);

//problem: es kann immer nur ein selector{prop} eingefügt werden
myStyle.insertRule(styles_to_insert,0);

hat jemand eine idee wie man das lösen kann?

mit Javascript lassen sich keine Dateien beschreiben. (abgesehen von Cookies)
Du könntest die CSS-Angaben über <style> einfügen.

der wurzelbert

[suit]

mit Javascript lassen sich keine Dateien beschreiben. (abgesehen von Cookies)

localStorage, Canvas - man kann viel mit JavaScript schreiben, ohne dafür explizit Rechte zu benötigen.

[wurzelbert]

servus suit,

localStorage, Canvas - man kann viel mit JavaScript schreiben, ohne dafür explizit Rechte zu benötigen.

nett, ich sollte mich mehr mit HTML5 beschäftigen..

der wurzelbert

[Georg Unterberger]

servus suit,

localStorage, Canvas - man kann viel mit JavaScript schreiben, ohne dafür explizit Rechte zu benötigen.

nett, ich sollte mich mehr mit HTML5 beschäftigen..

der wurzelbert

naja, ich will eigentlich nicht mal dateien beschreiben, sondern nur den inhalt selbst erstellen. das geht auch z.b. bei bilder, wenn euch base64 was sagt.
aber mal ehrlich gesagt, was hat es für einen sinn, wenn man einzelne regeln definieren kann, aber nicht viele zusammen? das wäre gleich wenn man bei ajax jeden html tag auslesen müsste und diesen dann über parent.addChild(obj) adden müsste -.-
hat also keiner von euch ne idee? =)

[suit]

naja, ich will eigentlich nicht mal dateien beschreiben, sondern nur den inhalt selbst erstellen. das geht auch z.b. bei bilder, wenn euch base64 was sagt.

Meinst du mit "base64" das "data" URL Scheme? RFC 2397

aber mal ehrlich gesagt, was hat es für einen sinn, wenn man einzelne regeln definieren kann, aber nicht viele zusammen?

Die Methode heißt nunmal "insertRule" und kann eben genau eine Regel einfügen und eben nicht "insertRules" um mehrere Regeln einzufügen.

Eine Lösung für dein Problem könnte aber das 2. Beispiel im MDN sein:
https://developer.mozilla.org/en/DOM:stylesheet.insertRule

[Georg Unterberger]

naja, ich will eigentlich nicht mal dateien beschreiben, sondern nur den inhalt selbst erstellen. das geht auch z.b. bei bilder, wenn euch base64 was sagt.

Meinst du mit "base64" das "data" URL Scheme? RFC 2397

aber mal ehrlich gesagt, was hat es für einen sinn, wenn man einzelne regeln definieren kann, aber nicht viele zusammen?

Die Methode heißt nunmal "insertRule" und kann eben genau eine Regel einfügen und eben nicht "insertRules" um mehrere Regeln einzufügen.

Eine Lösung für dein Problem könnte aber das 2. Beispiel im MDN sein:
https://developer.mozilla.org/en/DOM:stylesheet.insertRule

so, es hat sich jetzt gelöst, duch ein simplen style tag, mit innerhtml beschrieben und in den body gehängt

vielen vielen dank für die unterstützung

grüße
Georg

[Der Martin]

Hallo,

so, es hat sich jetzt gelöst, duch ein simplen style tag, mit innerhtml beschrieben und in den body gehängt

also dort, wo es eigentlich nichts verloren hat. Das style-Element gehört in head, auch wenn's die Browser nach meiner bisherigen Erfahrung auch anderswo akzeptieren.

Ciao,
 Martin

[suit]

so, es hat sich jetzt gelöst, duch ein simplen style tag, mit innerhtml beschrieben und in den body gehängt

Nebst Martins Kommentar: wieso überhaupt per JavaScript? Warum notierst du es nicht direkt?

[molily]

Hallo,

hat also keiner von euch ne idee? =)

Bereits https://forum.selfhtml.org/?t=206801&m=1404616 hatte einen wertvollen Vorschlag unterbreitet: ein style-Element zu verwenden und es normal über das DOM zu füllen. Hast du das ausprobiert? In welchem Browser? Wie sieht der Code dafür aus?

Mathias

[Georg Unterberger]

Hallo,

hat also keiner von euch ne idee? =)

Bereits https://forum.selfhtml.org/?t=206801&m=1404616 hatte einen wertvollen Vorschlag unterbreitet: ein style-Element zu verwenden und es normal über das DOM zu füllen. Hast du das ausprobiert? In welchem Browser? Wie sieht der Code dafür aus?

Mathias

hey,

ups, hab ständig probiert die style tags in den head zu setzten, im body funktioniert es XD
und es ist auch noch sinvoller so, denn so werden bei einem seitenwechsel die "lokalen" styles einer seite entfernt

vielen vielen dank an euch
georg

[Matthias Apsel]

Om nah hoo pez nyeetz, Georg Unterberger!

... ein style-Element zu verwenden ...

... die style tags ...

Nebst Deppenleerzeichen gibt es Unterschiede zwischen Tag und Element.

Matthias

[Gunther]

Om nah hoo pez nyeetz, Matthias!

» ... die style tags ...

gibt es Unterschiede zwischen Tag und Element.

Sehr schön anschaulich & übersichtlich.
Vielleicht solltest du dann auch noch den Unterschied zwischen einem öffnenden und einem schließenden Tag mit einbauen ...?

Gruß Gunther

[Matthias Apsel]

Om nah hoo pez nyeetz, Gunther!

gibt es Unterschiede zwischen Tag und Element. Sehr schön anschaulich & übersichtlich.

Vielen Dank.

Vielleicht solltest du dann auch noch den Unterschied zwischen einem öffnenden und einem schließenden Tag mit einbauen ...?

kommt in meine ToDoList.

Matthias