[JS/CSS] Javascript alleen uitvoeren wanneer CSS aan staat

[Verwijderd]

Ik wil een stuk Javascript alleen uitvoeren wanneer de gebruiker het gebruik van CSS aan heeft staan.

Een testopstelling waarbij ik een div de inline stijl 'display: none' heb gegeven om vervolgens de waarde van deze style te alerten met Javascript lijkt te werken (alleen getest in Firefox, omdat ik niet weet hoe je CSS gebruik uit kunt schakelen met IE). Hij alert 'none' wanneer CSS styles aan staan, en wanneer ik met de Developer Toolbar CSS uitschakel kreeg ik een lege string terug.

De vraag is tweeledig: ten eerste is dit niet de mooiste manier, omdat je afhankelijk bent van een semantisch gezien onnodig HTML element, dus kan dit handiger? En ten tweede: zo niet, heeft iemand enig idee hoe dit zich gaat gedragen in andere browsers (is er überhaupt een scenario waarin IE de CSS negeert)?

[Borizz]

Waarom zou je willen detecteren of iemand CSS aan heeft staan? De gebruiker heeft hier waarschijnlijk bewust voor gekozen en zal daar de gevolgen dan ook zelf van ondervinden.

[Verwijderd]

Borizz schreef op donderdag 15 juni 2006 @ 20:57:
Waarom zou je willen detecteren of iemand CSS aan heeft staan? De gebruiker heeft hier waarschijnlijk bewust voor gekozen en zal daar de gevolgen dan ook zelf van ondervinden.

Bijvoorbeeld voor een situatie waarin je een divje te zien krijgt met een uittreksel wanneer je met je muis over een link gaat. Dit is meestal een div die op basis van de muiscursor absoluut gepositioneerd wordt. Wanneer CSS echter uit staat, staat deze meestal helemaal bovenin de pagina op een mouseover. In deze situatie zou je die hele div (mogelijk) niet willen laten zien, en dus het verantwoordelijke stukje Javascript niet uit willen voeren.

[ Voor 6% gewijzigd door Verwijderd op 15-06-2006 21:01 ]

[Borizz]

Ja dat snap ik wel, maar de gebruiker die CSS uitschakeld is niet iemand die er niets vanaf weet en die weet vast dat een website dan erg vreemd gerenderd kan worden en 'raar' gedrag kan vertonen. Dus de eigenlijke vraag is dus waarom je met zoiets rekening wilt houden.

[Snake]

Je kan er 99% vanuit gaan dat de gebruiker CSS op heeft staan!

Check eerder voor versie van CSS, dat kan andere problemen geven ( IE 5, IE 5.5, IE 6... )

[Verwijderd]

of het is een slechtziende gebruiker die graag letters wil opschalen. Als de sitelayout dit niet in voldoende mate toestaat kan je beter even de css uitzetten. In dat geval wil je wel dat je geen rare effecten krijgt

(hier op GoT is dat ook lastig overigens)

je zou overigens van een "nuttig" element wat je toevallig met css een expliciete hoogte of breedte oid de contentWidth uit kunnen lezen, scheelt je een onnodig element.

[ Voor 25% gewijzigd door Verwijderd op 15-06-2006 21:44 ]

[Verwijderd]

Borizz schreef op donderdag 15 juni 2006 @ 21:35:
Ja dat snap ik wel, maar de gebruiker die CSS uitschakeld is niet iemand die er niets vanaf weet en die weet vast dat een website dan erg vreemd gerenderd kan worden en 'raar' gedrag kan vertonen. Dus de eigenlijke vraag is dus waarom je met zoiets rekening wilt houden.

Simpelweg omdat ik dat rare gedrag af wil vangen, omdat ik het respecteer wanneer iemand bewust zonder CSS browsed en hierbij geen onnodige drempels op wil werpen.

Wanneer een stuk Javascript volkomen uit z'n verband getrokken wordt bij gebrek aan styling, dan vind ik dat ik mag beslissen om deze Javascript niet uit te voeren.

[Verwijderd]

snake903 schreef op donderdag 15 juni 2006 @ 21:41:
Je kan er 99% vanuit gaan dat de gebruiker CSS op heeft staan!

Check eerder voor versie van CSS, dat kan andere problemen geven ( IE 5, IE 5.5, IE 6... )

Laat ik nou net die 1% af willen vangen

[Verwijderd]

Verwijderd schreef op donderdag 15 juni 2006 @ 21:41:
of het is een slechtziende gebruiker die graag letters wil opschalen. Als de sitelayout dit niet in voldoende mate toestaat kan je beter even de css uitzetten. In dat geval wil je wel dat je geen rare effecten krijgt

Prima scenario van waarom ik dit wil bereiken.

Blijft los van het 'waarom' de vraag in de startpost staan: hoe dit op een fatsoenlijke manier te doen?

[Borizz]

Verwijderd schreef op donderdag 15 juni 2006 @ 21:41:
[...]

Simpelweg omdat ik dat rare gedrag af wil vangen, omdat ik het respecteer wanneer iemand bewust zonder CSS browsed en hierbij geen onnodige drempels op wil werpen.

Wanneer een stuk Javascript volkomen uit z'n verband getrokken wordt bij gebrek aan styling, dan vind ik dat ik mag beslissen om deze Javascript niet uit te voeren.

Misschien dat het dan handig is om gewoon een linkje te maken die dit javascript uitschakeld? Dit linkje verberg je in je css. Voor diegene die CSS uit heeft staan wordt het linkje dan wel weergegeven voor de rest niet.

[Verwijderd]

Borizz schreef op donderdag 15 juni 2006 @ 21:47:
Misschien dat het dan handig is om gewoon een linkje te maken die dit javascript uitschakeld? Dit linkje verberg je in je css. Voor diegene die CSS uit heeft staan wordt het linkje dan wel weergegeven voor de rest niet.

Dat vind ik een net zo hoge drempel als Javascript aan laten staan eerlijk gezegd. Ik zoek een oplossing die het automatisch detecteert (zoals in mijn testopstelling).

[Borizz]

Misschien dat je de hoogte van een bepaald element die je met CSS hebt gezet op kan vragen (clientHeight/clientWidth). Of de positie van een bepaald element dat je met CSS positioneerd?

[BtM909]

Kan je nog wel je CSS collectie opvragen als CSS staat uitgeschakeld?

http://www.xs4all.nl/~ppk/js/changess.html (even de vraag cancellen)...

[Verwijderd]

Borizz schreef op donderdag 15 juni 2006 @ 22:03:
Misschien dat je de hoogte van een bepaald element die je met CSS hebt gezet op kan vragen (clientHeight/clientWidth). Of de positie van een bepaald element dat je met CSS positioneerd?

Ja, zoiets had ik al. Het is een optie, maar dan ben je dus afhankelijk van je markup. Een generiekere manier zou mooier zijn, omdat je het dan per definitie af kunt vangen zonder rekening te houden met de HTML.

[Verwijderd]

BtM909 schreef op donderdag 15 juni 2006 @ 22:16:
Kan je nog wel je CSS collectie opvragen als CSS staat uitgeschakeld?

http://www.xs4all.nl/~ppk/js/changess.html (even de vraag cancellen)...

Net even getest. Geeft helaas niet het gewenste resultaat. Toch bedankt voor het meedenken

[MrDummy]

Beter lezen? Beter browsen? Andere layout?

Cmon.... Dankzij CSS kun je instant site layout veranderen. Je kunt makkelijk wisselen naar andere layout door andere CSS tabel te nemen. Wil je graag dat site ook te lezen is voor slechtzienden? Wil je letters laten resizen? Laat de surfer maar zien dat je andere stijl kan kiezen op de pagina. Maak een CSS tabel met grote letters erin. Klaar.

Ik snap niet echt waarom je javascript voor moet hebben.
Want er zijn al aantal pure CSS sites. Zet je CSS uit, dan krijg je lelijk layout waar aantal letters opeens opelkaar te komen staan en dat is minder prettig surfen. Ik zou niet weten wat er verkeerd is aan CSS... Sterker nog - er zijn veel meer mensen die Javascript uitzetten dan CSS! De JS detectie script is leuk bedoeld, maar voor mij gewoon bitje overkill.

Perhaps wil je juiste CSS tabel kiezen, passend en werkend bij je browser? Dan gebruik je browserdetectie en dat laadt de juiste tabel in. Dat volstaat, niet waar?

[Verwijderd]

MrDummy schreef op vrijdag 16 juni 2006 @ 09:09:
Perhaps wil je juiste CSS tabel kiezen, passend en werkend bij je browser? Dan gebruik je browserdetectie en dat laadt de juiste tabel in. Dat volstaat, niet waar?

Nee

Ik ben prima in staat om een standards compliant semantisch correcte markup op te leveren, waardoor m'n websites prima te behappen zijn voor onder andere mensen met screen readers en andere hulpmiddelen, en ze er in iedere moderne browser hetzelfde uitzien en werken.

We moeten de discussie natuurlijk niet om gaan draaien. Je kan wel zeggen dat er geen reden is om CSS uit te zetten, maar ik wil in het kader van een toegankelijk internet niet op de stoel van de gebruiker gaan zitten en bepalen dat hij als 'ie iets uit wil zetten Javascript maar uit zet ipv CSS.

Daarnaast kan ik nog steeds wel een paar redenen verzinnen. Mijn PDA bijvoorbeeld staat zo ingesteld dat Javascript aan staat (soms helaas nodig voor bijvoorbeeld navigatie), maar CSS uit omdat alles dan door de browser onder elkaar gerendered wordt, zodat ik niet in de breedte hoef te scrollen. Daarnaast scheelt het dataverkeer, omdat non-gerelateerde afbeeldingen in de CSS (horen te) staan en dus niet gedownload worden.

Ik vind het overigens een toevoeging voor het topic om te discussieren over het wel of niet af willen vangen in Javascript of een gebruiker CSS aan heeft staan, maar niettemin wil ik los hiervan toch tot een oplossing komen voor wat ik wil bereiken. Dus als mensen nog nieuwe inzichten hebben op basis van mijn startpost, greeg

[Verwijderd]

afhankelijk van wat je eigenlijk met die js wilt:

als het alleen maar :hover opvangen is, dan stop dat voor echte browsers in je css en voor IE ook in je CSS door middel van behaviours. CSS uit -> hover dingen werken niet

Overigens @ mrDummy: Als je nou in je andere css sheet (tabel? ) eens niet die behaviours wilt hebben, dan zal je die, afhankelijk van de sheet toch uit moeten schakelen (is wel wat simpeler though, want dat stop je in je stylesheetswitcher)

[Verwijderd]

Verwijderd schreef op vrijdag 16 juni 2006 @ 09:58:
als het alleen maar :hover opvangen is, dan stop dat voor echte browsers in je css en voor IE ook in je CSS door middel van behaviours. CSS uit -> hover dingen werken niet

Ik kan me voorstellen dat je het voor meer zaken wilt gebruiken. Bijvoorbeeld zo'n 'tooltip' on hover waar ik het over had kun je met CSS in eerste instantie op 'display: none' zetten, of pas aan de DOM toevoegen met Javascript wanneer nodig. In het eerste geval zie je 'm alsnog staan zonder CSS, in dat tweede geval wil je dat de Javascript detecteert dat CSS uit staat en 'm niet aan de DOM toevoegt.

Maar het gaat dus om een generieker systeem, al kom ik nu alleen even op die tooltip als toepassing.

[ Voor 11% gewijzigd door Verwijderd op 16-06-2006 10:13 ]

[Verwijderd]

Voor IE zou je dat met behaviours kunnen doen, voor Firefox en Moz met bindings, voor opera zou ik nog even geen idee hebben

voorbeeldje voor Fx (IE behaviours is wat makkelijker documentatie over te vinden)

HTML:

<!DOCTYPE HTML>
<title>Untitled Document</title>
<style type="text/css">
div#blaat {
    border: 1px solid red;
    -moz-binding: url('binding.xml#blaat');
}
</style>
<div id="blaat">over</div>

XML:

<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl">
  <binding id="blaat">
    <implementation>
      <constructor>
        alert("creating the div");
      </constructor>
    </implementation>
    <handlers>
        <handler event="mouseover" action="this.style.backgroundColor = 'blue';"/>
        <handler event="mouseout" action="this.style.backgroundColor = '';"/>
    </handlers>
  </binding> 
</bindings>

voorbeeld: http://www.rikkertkoppes.com/tests/binding.html

note: als je de styles uitzet nadat je pagina geladen is (met de webdev toolbar) blijf je je behaviour houden, want dat is al aan je element gehangen. Als je met view->page style->no style gewoon alles uitzet en reload krijg je deze behaviour niet

[ Voor 167% gewijzigd door Verwijderd op 16-06-2006 11:01 ]

[Verwijderd]

Interesting mophor!

Ik ga even wat testopstellinkjes bouwen

[killercow]

Je kunt binnen je javascript ook checken of een bepaald element de door de css opgelegde waarde heeft over genomen of niet.

computedstyle doet wel wat je wil volgens mij.

edit:
oops, ik dacht iets te ver

[ Voor 13% gewijzigd door killercow op 16-06-2006 23:06 ]

[Verwijderd]

killercow schreef op vrijdag 16 juni 2006 @ 16:25:
Je kunt binnen je javascript ook checken of een bepaald element de door de css opgelegde waarde heeft over genomen of niet.

Ja, dat heb ik in de startpost gedaan