Opened by Linuxer at 2022-08-19 17:54
User since
2006-01-27
3870 Artikel
HausmeisterIn
2006-01-27
3870 Artikel
HausmeisterIn
Hi,
ich habe jetzt mal daheim probiert, ein Beispiel meiner Lösung zu erstellen. Ich musste aber feststellen: Da steckten mehr Fallstricke drin als ich erwartet habe. Was in der Firma im Windows-Chrome noch funktionierte, verweigerte mir jetzt zu Hause im Firefox auf Linux die Zusammenarbeit. Aber auch diesen Fallstrick konnte ich lösen, dazu am Ende mehr.
Insgesamt bin ich mit der Lösung selber unzufrieden, weil - soweit ich das jetzt gesehen habe - nur holprig zu bedienen ist und man nicht wirklich "bequem" an die Werte kommt.
Ich wollte ja eigentlich ein Hard-Coding des Wertes für display: vermeiden, für den Fall, dass es mal zu Änderungen an der Definition der zugrunde liegende CSS-Klasse w3-button geben käme. In so einem Fall, so war mein Gedanke, wäre es mit einem (*träum*) styles[0].getCssRule("w3-button").style.display oder so ähnlichh doch schön gelöst.
Aber die Realität, soweit ich sie heute gesehen habe, sieht ungleich unschöner aus. Die Reihenfolge der styles hängt davon ab, wie sie im HTML-Head geladen werden. Zwar habe ich bei meiner Recherche eine Beispielfunktion gesehen, mit der man ein gewünschten Style anhand einen gegebenen Titels erhalten könnte. Allerdings ist es mir wohl entgangen, wie ich für ein Stylesheet einen spezifischen Titel setzen kann. Dazu fand ich auf die Schnelle nix hilfreiches.
Also muss drauf geachtet werden, an welcher Stelle das w3.css geladen wird, damit dann in der Funktion der korrekte Index verwendet wird. Der Einfachheit halber setze ich mir also die Vorgabe, dass w3.css immer als erstes geladen werden muss.
Hat man sein Stylesheet gefunden, geht es daran, die korrekte Regel zu finden. Auch das geht nicht schön. Stattdessen muss man die Liste der CSS-Regeln durchwandern und selber nachschauen, ob in der Regel evtl. das gewünschte drin steht. Hier also "w3-button " (ohne ":hover" o.ä.), "display:", und nicht das "w3-button" in einem "@media" Selektor. Diese "Kriterien" sind natürlich auch nur durch Ausprobieren und Spicken entstanden.
Das erfordert enorm spezifischen Code, nur um w3-button's "display:" Definition aus dem Stylesheet zu lesen. Sollte sich also etwas an dem CSS in künftigen Versionen ändern, muss im schlimmsten Fall auch dieser JS-Code darauf angepasst werden. Das erzeugt am Ende wahrscheinlich mehr Arbeit als ein hart-kodiertes "inline-block", das - einmal im CSS Code einer zukünftigen w3.css nachgeschaut - einfach übernommen wird, und mit Hinweis eingebaut wird. Wenn es dann in Zukunft plötzlich schlimmer als vorher aussieht, findet man so wahrscheinlich eher und mit weniger Aufwand die notwendige Korrektur.
Alleine aus diesem Grund werde ich den Gedanken wohl nicht weiter verfolgen und doch auf das hart kodierte "inline-block" setzen und einen Kommentar dazu schreiben, woher das abgeleitet ist. Sollte ich das so ins Produktive übernehmen wollen.
Und nun zu den Unterschieden Firma <-> Daheim.
Daheim war der Gedanke "Bastel mal eben ein HTML zusammen, worin Du das verdeutlichen kannst". Gesagt, getan.
HTML-Datei erstellt und im Firefox geladen: "file:///home/devel/example.html". Bis es an das Auslesen des Stylesheet ging, klappte das auch super. Dann begrüßte mich die Firefox-Meldung:
Nach einigem Hin und Her realisierte ich: In der Firma habe ich das über eine Mojolicious Instanz zusammengebaut und bereitgestellt; nicht in einer lokalen Datei!
Kaum habe ich das daheim auch über eine Mojolicious Instanz angeboten und aufgerufen, funktionierte das auch endlich im Firefox auf Linux!
So, genug Zeit damit verbracht.
Anbei zwei Archive.
Einmal nur die zwei Dateien (w3.css und example.html) und einmal ein Archiv meiner Mojolicious Spielwiese für diesen Test. Die relevanten Dateien liegen im public Ordner.
Schönen Abend.
Linuxer
PS: Hier noch mal die selbst gebastelte JS-Funktion zur Direktansicht:
Anhänge
Last edited: 2022-08-19 22:02:43 +0200 (CEST)
ich habe jetzt mal daheim probiert, ein Beispiel meiner Lösung zu erstellen. Ich musste aber feststellen: Da steckten mehr Fallstricke drin als ich erwartet habe. Was in der Firma im Windows-Chrome noch funktionierte, verweigerte mir jetzt zu Hause im Firefox auf Linux die Zusammenarbeit. Aber auch diesen Fallstrick konnte ich lösen, dazu am Ende mehr.
Insgesamt bin ich mit der Lösung selber unzufrieden, weil - soweit ich das jetzt gesehen habe - nur holprig zu bedienen ist und man nicht wirklich "bequem" an die Werte kommt.
Ich wollte ja eigentlich ein Hard-Coding des Wertes für display: vermeiden, für den Fall, dass es mal zu Änderungen an der Definition der zugrunde liegende CSS-Klasse w3-button geben käme. In so einem Fall, so war mein Gedanke, wäre es mit einem (*träum*) styles[0].getCssRule("w3-button").style.display oder so ähnlichh doch schön gelöst.
Aber die Realität, soweit ich sie heute gesehen habe, sieht ungleich unschöner aus. Die Reihenfolge der styles hängt davon ab, wie sie im HTML-Head geladen werden. Zwar habe ich bei meiner Recherche eine Beispielfunktion gesehen, mit der man ein gewünschten Style anhand einen gegebenen Titels erhalten könnte. Allerdings ist es mir wohl entgangen, wie ich für ein Stylesheet einen spezifischen Titel setzen kann. Dazu fand ich auf die Schnelle nix hilfreiches.
Also muss drauf geachtet werden, an welcher Stelle das w3.css geladen wird, damit dann in der Funktion der korrekte Index verwendet wird. Der Einfachheit halber setze ich mir also die Vorgabe, dass w3.css immer als erstes geladen werden muss.
Hat man sein Stylesheet gefunden, geht es daran, die korrekte Regel zu finden. Auch das geht nicht schön. Stattdessen muss man die Liste der CSS-Regeln durchwandern und selber nachschauen, ob in der Regel evtl. das gewünschte drin steht. Hier also "w3-button " (ohne ":hover" o.ä.), "display:", und nicht das "w3-button" in einem "@media" Selektor. Diese "Kriterien" sind natürlich auch nur durch Ausprobieren und Spicken entstanden.
Das erfordert enorm spezifischen Code, nur um w3-button's "display:" Definition aus dem Stylesheet zu lesen. Sollte sich also etwas an dem CSS in künftigen Versionen ändern, muss im schlimmsten Fall auch dieser JS-Code darauf angepasst werden. Das erzeugt am Ende wahrscheinlich mehr Arbeit als ein hart-kodiertes "inline-block", das - einmal im CSS Code einer zukünftigen w3.css nachgeschaut - einfach übernommen wird, und mit Hinweis eingebaut wird. Wenn es dann in Zukunft plötzlich schlimmer als vorher aussieht, findet man so wahrscheinlich eher und mit weniger Aufwand die notwendige Korrektur.
Alleine aus diesem Grund werde ich den Gedanken wohl nicht weiter verfolgen und doch auf das hart kodierte "inline-block" setzen und einen Kommentar dazu schreiben, woher das abgeleitet ist. Sollte ich das so ins Produktive übernehmen wollen.
Und nun zu den Unterschieden Firma <-> Daheim.
Daheim war der Gedanke "Bastel mal eben ein HTML zusammen, worin Du das verdeutlichen kannst". Gesagt, getan.
HTML-Datei erstellt und im Firefox geladen: "file:///home/devel/example.html". Bis es an das Auslesen des Stylesheet ging, klappte das auch super. Dann begrüßte mich die Firefox-Meldung:
Code: (dl
)
Uncaught DOMException: CSSStyleSheet.cssRules getter: Not allowed to access cross-origin stylesheet
Nach einigem Hin und Her realisierte ich: In der Firma habe ich das über eine Mojolicious Instanz zusammengebaut und bereitgestellt; nicht in einer lokalen Datei!
Kaum habe ich das daheim auch über eine Mojolicious Instanz angeboten und aufgerufen, funktionierte das auch endlich im Firefox auf Linux!
So, genug Zeit damit verbracht.
Anbei zwei Archive.
Einmal nur die zwei Dateien (w3.css und example.html) und einmal ein Archiv meiner Mojolicious Spielwiese für diesen Test. Die relevanten Dateien liegen im public Ordner.
Schönen Abend.
Linuxer
PS: Hier noch mal die selbst gebastelte JS-Funktion zur Direktansicht:
Code (javascript): (dl
)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
function get_Button_display_style() { var list = document.styleSheets; // w3.css must be loaded first, so we get the correct rules here var rules = list[0].cssRules; for ( var i=0; i<rules.length; i++ ) { var text = rules[i].cssText; // XXX: much too complex code for getting the display: definition of // a css class // if it is the rule for w3-button if ( text.indexOf(".w3-button ") > -1 ) { // which includes a display: definition if ( text.indexOf("display:") > 0 ) { // and is not part of the @media definition if ( text.indexOf("@media" ) == -1 ) { // return display: definition return rules[i].style.display; } } } } }
Anhänge
Last edited: 2022-08-19 22:02:43 +0200 (CEST)
meine Beiträge: I.d.R. alle Angaben ohne Gewähr und auf Linux abgestimmt!
Die Sprache heisst Perl, nicht PERL. - Bitte Crossposts als solche kenntlich machen!
Die Sprache heisst Perl, nicht PERL. - Bitte Crossposts als solche kenntlich machen!