[JS] Kijken wat de browser kan

[hippje]

Oi!

Ik moet voor mijn stage een opdracht doen, ik moet een nieuw menu maken voor de website van een klant. Ik heb dit gedeeltelijk met CSS3 + JavaScript gedaan. But the problem is, dat niet elke browser nog CSS3 ondersteunt ... Ik heb dus ook een JavaScript menu gemaakt, maar is minder mooi qua effecten

Weet iemand hoe je kan kijken wat de browser dus wel of niet kan?
Als de browser dus wel CSS3 ondersteund -> CSS3 menutje
Zo niet de lelijke, niet mooi geanimeerde JavaScript menutje.

Alvast bedankt!

Hippje

 

[That Guy]

Je pakt het verkeerd aan. Op deze manier zal je menu dus niet werken als iemand Javascript uit heeft staan, en dat is een Slecht Idee.

Normaal gesproken maak je eerst een menu met HTML; dan stijl je het met CSS, en als je het mooier wilt hebben, ga je (dan pas) met Javascript aan de gang.




:thumb:


[edit]Ik vraag me overgens af wat het probleem is met de browser-degradation van CSS3; als een browser bijvoorbeeld geen border-radius ondersteund, worden het gewoon rechte hoeken...[/edit]

 

[hippje]

Wie zet er nou zn JavaScript uit ... En bijna de gehele website maakt gebruik van JS.

Het probleem met HTML menus is dat het tog nooit zo mooi wordt. Met het CSS3 menu heb ik gemaakt dat als je er op klikt dat het icoontje van opacity 0 jaar 100 vloeiend gaat, vergroot/verkleint en dat kon je tog niet echt mooi doen met HTML ...

 

[ErikBooy007]

Wat That Guy probeert te zeggen (en wat jij dus precies verkeerd doet), is dat een website niet op JavaScript hoort te berusten. JavaScript is leuk voor extra functionaliteit.

Eerst zorgen dat je website helemaal correct functioneert met niets meer dan HTML en CSS(2) en dan pas eventueel gaan denken aan leuke effectjes met JS en CSS3. Ten eerste heb je dan altijd een fallback en ten tweede, er zijn zeker nog wel veel mensen die JS uit hebben staan. Helemaal omdat JS in IE nog wel een security-issues op wil leveren.

Neem het advies van That Guy nou maar serieus, hij is niet de eerste de beste op dit gebied.

[EDIT]
En toch spel je met CH op het eind.
[/EDIT]

 

[That Guy]

Als je overgens alsnog CSS3-achtige dingen wilt detecten, kan je even naar modernizr kijken. Quote:

Have you ever wanted to do if-statements in your CSS for the availability of cool features like border-radius?

Ohja, en over je 'javascript-uit' idee:

Wie zet er nou zn JavaScript uit ... En bijna de gehele website maakt gebruik van JS.

Mensen met een handicap (bijvoorbeeld blinden of slechtzienden), en zoekmachines (zoals google) hebben geen Javascript aan staan. Die kijken gewoon naar de pure HTML-code. Als je dan data laat afhangen van technologieën zoals Javascript en CSS, zien deze mensen/zoekmachine's je data dus niet, en krijg je dus geen goede google-positie. Daarnaast verlies je een doelgroep, omdat die informatie op je site niet goed kunnen vinden.

Bepaalde mensen hebben Javascript zelfs gewoon uit omdat ze geen zin hebben op al die reclame-achtige dingen (pop-ups bijvoorbeeld werken via Javascript).

Sommige mobiele telefoons hebben overgens ook nog een slechte Javascript/CSS comptabiliteit; deze users hebben ook moeite met je site.

Javascript op je site gebruiken is tof; het is ook bedoelt voor het web. Maar als je Javascript de usability begint te overstemmen, moet je nog eens goed nadenken over de opzet van je site.

Als je wat meer wilt weten over usability, kan je eens wat alertbox-artikelen lezen, of gewoon wat rond google'n.

 

[csshunter]

@hippje:
Uit het bovenstaande kan ik eigenlijk nog niet opmaken of je menu het nu wel of niet helemaal zonder javascript doet.
Heb je een linkje naar een testpagina, zodat we iets kunnen zien (en mogelijk alternatieven kunnen aandragen)?

/half-en-half off-topic/

Hé, die Modernizr heeft best een handig trucje om de beschikbaarheid van css3-eigenschappen te sniffen. Dacht dat het onmogelijk was, maar had het eigenlijk zelf moeten kunnen verzinnen.

Maar omdat ie op javascript draait, moet je dus:

• standaard de css3-eigenschappen uit hebben staan (dan werkt alles ook zonder js). *)
• met het Modernizr-js sniffen wat wel/niet aan css3 gerealiseerd kan worden (bij js UIT: niets dus *) ),
• het M-script zijn gang laten gaan met de keuze van classes voor wel/geen css3-eigenschap ondersteuning door de browser.

Dat is pas gelaagd bouwen (in het kwadraat)! :d

Leuk hoor,
CSShunter

PS:
Voor aardige overvloeiers met gewoon javascript zonder css3 is hier nog een scriptje:
www.developerscorner.nl/css-exercitions/css-popup-fading.htm

[edit]Of in deze: www.developerscorner.nl/css-exercitions/foto-carrousel.php[/edit]
________
*) Tenzij je met browser-prefixen gaat werken voor die browsers waarvan je weet dat ze het al doen op een bepaalde eigenschap; zoals in het popup-fading script.

 

[hippje]

Helleuw

De website wordt niet op Google gezet omdat het een administratief systeem is ... en je wil niet dat dat allemaal openbaar wordt toch?

Maar het is me toch gelukt dankzij That Guy via dat modernizr

En ik weet ook wel dat toch met CH is maar ik zat op mijn iPod en wou nog eventjes snel reageren voordat ik ging slapen


Bedankt!
Hippje