[CSS/JS] Dynamisch geladen stylesheet cascade fout

[Apollo_Futurae]

Wat is de bedoeling

een extra stylesheet inladen voor javascript-enabled browsers

Wat heb ik gedaan

een stylesheet zonder href linken:

code:

<link rel="stylesheet" type="text/css" id="formjavascriptstylesheet"></link>

in een javascriptje de source opgeven:

code:

getByID('formjavascriptstylesheet').setAttribute('href', './formjavascript.css');

(getByID() is een crossbrowser getElementById())

Wat is het probleem

Het stylesheet wordt wel ingeladen (als ik JS enable althans ), maar om de één of andere reden kan dit stylesheet geen properties overrulen die al eerder geset zijn.

Voorbeeldje:
'background-color: green;' werkt, tenzij ik in een ander stylesheet (waarvan de link-tag boven de 'lege' link-tag staat) al 'background-color: red;' heb staan.

Dit vind ik vreemd, want het feit dat het stylesheet m.b.v. javascript wordt ingeladen zou het cascaden toch niet moeten veranderen?

[Hangloozz]

tjessus, waar ben jij al die tijd geweest; id=12978 en pas 14 posts

maar goed.
Waarom doe je het op deze (vage) wijze?
Waarom niet een d.write met een @import ofzo?

Ik snap je 1-regelige bedoeling niet... (en daardoor kan ik ook niet meedenken over een eventuele oplossing )

[Verwijderd]

Op woensdag 26 juni 2002 21:23 schreef Hangloozz het volgende:
tjessus, waar ben jij al die tijd geweest; id=12978 en pas 14 posts

offtopic:
zozo, je bent een behoorlijke lurker dan

ontopic:
tsjah, dat heeft te maken denk ik met de overrule regels die zijn verzonnen door naar ik geloof het W3C. Als dat inderdaad het geval is, dan is er niets dat je kunt doen, tenzij je een work-a-round kunt verzinnen...

succes!

[Limhes]

Ik neem wel aan dat je em document.onLoad aanroept?

[Apollo_Futurae]

tjessus, waar ben jij al die tijd geweest; id=12978 en pas 14 posts

Ik heb me een tijd geleden geregistreerd om een keer iets te vragen. Pas de laatste 2 weken post ik regelmatig iets (vakantie).

Waarom doe je het op deze (vage) wijze?
Waarom niet een d.write met een @import ofzo?

Ik vertrouw document.write() niet, omdat ik me altijd afvraag waar het geschreven wordt (is er een manier om daar achter komen?). Vandaar deze oplossing.

Ik snap je 1-regelige bedoeling niet... (en daardoor kan ik ook niet meedenken over een eventuele oplossing )

Het gaat om een php-class om het maken van formulieren te versnellen (een soort library). Voor grote formulieren heb ik een mogelijkheid gemaakt om met tabbladen te werken. Maar als de browser geen javascript ondersteunt, werken de tabbladen niet. De weergave van sommige elementen moet dus anders zijn in JS-enabled dan in JS-disabled browsers.

P.S.:
Alle clientside code wordt dus gegenereerd met php. Dit maakt in principe niet uit, je moet alleen goed opletten dat je sommige dingen dubbel escapet.

[Apollo_Futurae]

Op woensdag 26 juni 2002 21:34 schreef Limhes het volgende:
Ik neem wel aan dat je em document.onLoad aanroept?

nee, maar in de script-tag staat defer="true". Dat komt op hetzelfde neer (toch?) en vind ik netter staan dan een onLoad.

[Apollo_Futurae]

Op woensdag 26 juni 2002 21:34 schreef dannydude het volgende:
tsjah, dat heeft te maken denk ik met de overrule regels die zijn verzonnen door naar ik geloof het W3C.

Het me onwaarschijnlijk dat het voor de cascade uitmaakt of een stylesheet hardcoded of dynamisch is ingeladen.
Ik heb de CSS2 ref gelezen en daarin staat hierover niets.

[Verwijderd]

Op woensdag 26 juni 2002 22:15 schreef Apollo_Futurae het volgende:

[..]

Het me onwaarschijnlijk dat het voor de cascade uitmaakt of een stylesheet hardcoded of dynamisch is ingeladen.
Ik heb de CSS2 ref gelezen en daarin staat hierover niets.

Maar je hebt toch al een andere ook ingeladen, voor wanneer de JS disabled is? Die zou hem kunnen overrulen.

[Apollo_Futurae]

Op woensdag 26 juni 2002 22:22 schreef dannydude het volgende:
Maar je hebt toch al een andere ook ingeladen, voor wanneer de JS disabled is? Die zou hem kunnen overrulen.

Die overrulet hem inderdaad. En dat zou niet moeten, omdat het stylesheet voor JS-enabled browser later wordt geladen (hij staat onder de andere).
Ik begrijp er niets van. Ik ga maar eens rommelen met document.write(), al vertrouw ik die nog steeds niet .

[Verwijderd]

Daar heb je volgens mij de reden:

Als ik eventjes ga redeneren met een bug die ik nooit begreep die ik had met een image-map. Toen bleek dat ik er twee met dezelfde naam had gedeclareerd en toen overrulede de éérste de tweede, in tegenstelling tot wat je zou verwachten.

Probeer dus es of je de volgorde van inladen kan omdraaien.

Trouwens, een work-a-round is dus door eerst een java-script check te doen en dan door te sturen naar verschillende pagina's. In combi met dat je het al via php genereert is dat misschien niet eens zo heel veel werk, maar is wel 100% reliable.

[Apollo_Futurae]

Het omdraaien van de link-tags maakt niets uit.

Verder heb ik het volgende geprobeerd:

code:

<link rel="stylesheet" type="text/css" href="./form.css"></link>
<link rel="stylesheet" type="text/css" href="./myform.css"></link>
<script type="text/javascript" src="formfunctions.js"></script>
<script type="text/javascript" defer="true"><!--
    
    document.write('<link rel="stylesheet" type="text/css" href="./formjavascript.css"></link>');
    
//--></script>

maar toen liet mijn browser een prachtige lege pagina zien (als ik JS uitzet, krijg ik wel gewoon mijn pagina - maar dan uiteraard zonder het extra stylesheet).

[Hangloozz]

tsja, 3 stylesheet definities..daar raak ik ook de weg van kwijt.

<link> hoeft trouwens niet getermineerd te worden.

Even op een hele ander boeg:
waar verwacht je javascript-disabled browsers nowadays?
Kun je dan niet beter een check inbouwen met een melding dat javascript enabled moet zijn om de pagina juist weer te kunnen geven?


Misschien kun je nog wat met het (IE only)attribuut van STYLE waarmee je de inline sheet kunt uitschakelen.

En anders ff flink het net afspeuren naar crossbrowser en compatibel stylesheet gebruik icm JS...

[paragon]

Ik doe ook zoiets maar net even iets anders, omdat het op andere manieren zoals die van jou niet lukte.

code:

<link id="style" rel="stylesheet" type="text/css" href="JS/basic.css" />
<script type="text/javascript">
changeStyle('JS/advanced.css');
</script>

en

code:

function changeStyle(type) {    
    document.getElementById('style').setAttribute('href',type);
}

Dit werkt zowel in IE5.5/6.0 en Mozilla andere browsers niet getest, maar opera doet het niet.

Waarom gebruik je eigenlijk defer?

[Apollo_Futurae]

Op woensdag 26 juni 2002 23:00 schreef Hangloozz het volgende:
<link> hoeft trouwens niet getermineerd te worden.

och, het kost geen tijd/moeite en ik probeer (soms ) XHTML te schrijven. OT: IE6 lijkt nogal moeite te hebben met <input /> tags. Klopt dat?

Even op een hele ander boeg:
waar verwacht je javascript-disabled browsers nowadays?
Kun je dan niet beter een check inbouwen met een melding dat javascript enabled moet zijn om de pagina juist weer te kunnen geven?

Ik heb nog ff doorgeworsteld met document.write(), maar ben nu tot de conclusie gekomen dat de javascript check idd beter op een andere pagina kan.
Ik geef gebruikers van mijn formulier class nu de keuze tussen wel en geen tabbladen. Als er gekozen wordt voor tabbladen, ga ik ervan uit dat JS mogelijk is.
Afhankelijk van deze keuze laadt de class een ander stylesheet in.

Het probleem is hiermee niet opgelost, maar omzeild. Iedereen bedankt voor het meedenken!

[paragon]

Werkt mijn plossign dan ook niet bij jou?

[Apollo_Futurae]

Op donderdag 27 juni 2002 00:17 schreef paragon het volgende:
Werkt mijn plossign dan ook niet bij jou?

het werkt op zich wel (het stylesheet wordt ingeladen), maar dat was het probleem niet - de stylesheets cascaden niet goed (en dat gaat ook fout bij jouw oplossing).

maar het probleem is dus omzeild en ik hoop dat ik er later niet nog een keer mee te maken krijg, want het begon er hopeloos uit te zien .