General discussion

  • Creator
    Topic
  • #2264353

    CSS or Javascript or ….

    Locked

    by allan.thompson@ntlworld ·

    So, what do folk recommend for menu creation on web sites?
    I usually use javascript tree style menus but the recent article on CSS has me thinking that this might be a better option.
    One problem with Javascript, I believe, is that the user has to enable javascript use on their machines.
    On the other hand CSS is only usable on fairly recent versions of browsers.
    Is that a fair summary?
    What do people think?

All Comments

  • Author
    Replies
    • #2487399

      CSS has been usable for ages.

      by tony hopkinson ·

      In reply to CSS or Javascript or ….

      CSS2 to 3, some browsers didn’t implement it all, some of them implemented it differently.
      There are still annoying differences on some bits.

      Javascript should always be your last option, It’s buggy, hard to maintain and relies on client side execution which is becoming more and more of a non starter as browser security becomes more of a public topic.

    • #2487378

      css as much as possible.

      by danlm ·

      In reply to CSS or Javascript or ….

      I have all this fancy software that can map my web site off the menu’s/links. Well, it doesn’t read javascript. I also don’t think that the search engine bots can either for indexing all your pages.

      css does not hinder either. Also, if you ever watch a page with javascript menu’s load compared to css. css will win every time, it’s faster. Read all kinds of articles on that one, and also see it in action.

      You can get the same look from css. Unfortionally, I don’t do web pages that often. So, it’s always a new lesson every time I use css. I just don’t remember the exacts when it gets that involved.

      Dan

    • #2504580

      CSS all the way!

      by wondrouswebs ·

      In reply to CSS or Javascript or ….

      Use CSS. I like Javascript and use it where appropriate, but I try to never use it where functionality is concerned. Rotating images – sure; menus – never. You can do rollovers with CSS that perform beautifully, you can keep your menu button images to a minimum (if you use them at all; not really necessary unless you are getting fancy), and you will be more in keeping with Web standards. CSS rules.

    • #2504478

      never, ever CSS for controlling the menus, just styling them

      by pixelsurge ·

      In reply to CSS or Javascript or ….

      If you care about accessibility and usability in the slightest, never use CSS for controlling the menus. Always use JavaScript. This is what it is designed for. Keep the CSS restricted to styling the semantic markup that JavaScript controls the behavior of. For a great summary of my rationale, please see http://www.wait-till-i.com/index.php?p=327.

      • #2504385

        I question your reasoning

        by danlm ·

        In reply to never, ever CSS for controlling the menus, just styling them

        And not to be a smart a$$, but because I truly do not agree.

        Javascript is disabled on a lot of browsers due to security issues. I would put money that more people disable Javascript because of this, then would CSS.

        If I was to want to implement a technology that is more accessible, i would think that CSS is the better way.

        And that is why I would use CSS over javascript, even in menu’s. I think it is turned on more often then Javascript. And then you have the added benefits that it will load faster and the search engine bots can read it easier.

        Dan

        • #2504766

          turn off css?

          by jaqui ·

          In reply to I question your reasoning

          how?
          it’s built into the html rendering engine.
          you cannot disable css at all and have a functioning browser.

          note:
          if you use a browser that never had css support, such as lynx, this whole question is moot, no css or javascript in lynx.

        • #2504990

          please read the article I cited

          by pixelsurge ·

          In reply to I question your reasoning

          It seems obvious that no one read the article I cited, which explains all the accessibility problems with CSS menus. Either that, or you’re willing to accept those problems and accept that a significant portion of your audience won’t be able to navigate your site, which is your choice, but not one I agree with.

          Your logic seems to be that it is better for, let’s say 10% of the users to have to use a static menu (because any decent JS menu will gracefully degrade to a static menu when JS is not available) than for let’s say 2% of the users to not be able to navigate the site at all. I have the opposite view. Yes, I agree that it is more likely that JS is disabled than CSS is disabled. But that’s only a tiny part of the equation. If you are a keyboard user, you cannot use a CSS menu, period. There’s no graceful degradation for these users. There’s no way to make a CSS menu work for people who have slightly shaky hands or poor motor skills and can’t follow the precise movements needed by CSS menus. There’s no way to make a CSS menu work for people with small screens when the menus extend off the screen. Etc.

          The bottom line is this: The only advantage that anyone can cite for CSS menus over JS menus is that it is more likely that CSS is available than JS is available. To me, this advantage entirely misses the point. The point is that even without JS, JS menus are usable because they can degrade to regular menus. CSS menus can degrade to regular lists when CSS is not available, but the more common scenario is that CSS is available but a disability or limitation on the part of the user makes them unusable. CSS menus are never going to be usable by 100% of the users, period, while JS menus can be. I’d much rather have 100% of my audience able to navigate my site, even if some of them have to use a regular menu. You may choose to ignore part of your audience and go for, let’s say 95% accessibility, but I think that’s extremely unwise when 100% accessibility is possible.

          I think that makes my reasoning very clear. I value accessibility, and use techniques that maximize it.

        • #2504979

          Link doesnt work

          by ron_conaway ·

          In reply to please read the article I cited

          The link for the article you reference returns an error:
          “Error establishing a database connection! This probably means that the connection information in your wp-config.php file is incorrect. Double check it and try again.

          Are you sure you have the correct user/password?
          Are you sure that you have typed the correct hostname?
          Are you sure that the database server is running? “

        • #2491634

          Link worx + comments re linked article

          by alanholm ·

          In reply to Link doesnt work

          But there are alternatives 2 JS (besides PHP, PERL etc).

           

          Problem with JS is it worx Client-side, so, it doesn’t exist if JS isn’t enabled or available on the client bowser.

           

          Server-side ASP allows JS equivilant conditional stuff – even using JS if desired (& include files to enable 1 navigation section 2 b included on all pages throughout a Web site) to add 2 what CSS can manage – conditionally highlighting current page in navigation etc. to improve usability – CSS can change the appearance of already visited navigation to also improve usability – navigation should always indicate not only where you can go to, but also where u r & where u’ve already been.

           

          Also, http://www.cssplay.co.uk/accesskeys.html shows how accessibility can be supported for users using screen readers.

           

          If u browse cssplay.co.uk u’ll be amazed by what CSS can do WITHOUT ANY JS!

           

          CSS ZEN GARDEN has some eye-popping demos of the power of CSS 2 totally transform identical content 2.

        • #2491819

          value accessability

          by jaqui ·

          In reply to please read the article I cited

          and use javascript?
          a contradiction in terms.

          javascript = non accessable.

          btw, I use css menus and I use a keyboard only navigating browser by choice.
          guess what, css menus work just fine, since any keyboard only browser doesn’t render the STYLING of the xhtml links that make the menu. it does render the links.
          you argument against css is completely spurious.

        • #2491774

          Say what?

          by apotheon ·

          In reply to please read the article I cited

          If your CSS makes a page unusable by anyone at all, you’ve performed a miracle.

          Worst-case scenario:
          A client that does not support CSS at all comes along. All navigation elements are visible as unstyled markup. The client can still use the navigation elements.

          Worst-case scenario using JavaScript:
          A client that does not support JavaScript at all comes along. All navigation elements are missing. The client is stuck.

          Period.

      • #2504938

        There are things that you can’t rely in CSS to do

        by tony hopkinson ·

        In reply to never, ever CSS for controlling the menus, just styling them

        or to do well, BUT, you can’t rely on JavaScript at all.
        It’s turned off by default, If I don’t ‘know’ you it stays that way.

        No menu !

        I can see what you are saying but all the struggles with doing rich interfaces on web applications aren’t down to CSS or JavaScript limitations, W3C standards or browser incompatibilities.

        They are because the controls offered over the web are poor, and the things you can do with a pull only interaction massively limited.

        All web rich client apps are, is an attempt to do a client side executable on the cheap, like most short cuts they take longer and cost more in the end.

        • #2504857

          I truthfully have gotten to the point that I don’t want a souped up page

          by danlm ·

          In reply to There are things that you can’t rely in CSS to do

          Some affects are nice, but if I am on a web page for what ever purpose.
          I want it to load fast.
          I want it organized so I can get to what I am looking for quickly.
          I want it readable so I can dissect the information I am looking for.

          Unless I am researching a car, and want the special affects to spin and rotate it 9 different ways. It’s a waste of my time, and I just move on to another web page.

          CSS meets all those requirements without adversely affecting any of the experience.

          Dan

      • #2505104

        my only complaint about css is, different browsers.

        by danlm ·

        In reply to never, ever CSS for controlling the menus, just styling them

        Grrrr, I just spent more time then I wish to discuss trying to get a page look the same in IE and FF. You know, what a bloody pain in the butt. I wanted, and made it work using CSS because I can make changes on the fly. But, it was like pulling teeth.

        Hell, I had .png files which had transparency area’s displaying in different colors depending on the browser. MS made it grey or some crap like that, and ff read it right. There was a white background under it all.

        With the bloody display: box, padding, font sizes, and floats. Eh, let’s just say. trial and errror, trial and error. I swear, nothing acts the same from one browser to the next. I can’t wait to see what this stuff looks like tomorrow at work when I have a mac to look at it.

        No, I am not good at css. Not even close to being in the least bit proficient. But, even following examples I still could not get the same results.

        I still think CSS is the way to go though. one reason only, which Jaqui pointed out. css isn’t turned off.

        And I apologize for my comment that it was. I was wrong(again).

        Ya know, hammers really are a wonderful thing. The bigger the hammer, the more I like them.

        Round hole, square block. I’ll make it fit. Hand me the BFH.

        As a side note to this, you don’t need to use inline lists with css to get the look of table menu’s. I did it with float, display: block, and just the a href. Won’t get no drop downs this way, but I didn’t want any.

        Dan

    • #2504883

      I say mix them

      by viruser ·

      In reply to CSS or Javascript or ….

      If you look at the new yahoo, you will notice they use both js and css to create their menus. CSS is much easier to manage but as you stated, you have to have the latest version of the browsers. Javascript on the other hand can create some interesting features including the famous show and hide…:D

    • #2504774

      CSS . . .

      by apotheon ·

      In reply to CSS or Javascript or ….

      . . . but use it carefully. JavaScript and CSS both might be unavailable to an end client, but CSS is more likely to be working than JavaScript these days, so CSS is the better option. CSS is also a better option because you can more easily design your site navigation so that it’s still usable when the dynamic elements (CSS or JavaScript) don’t work.

      Design your menu so that it still works without CSS by, for instance, having the CSS hide all submenus by default, then reveal them when you roll over or click on the menu parent elements.

      You can make JavaScript navigation degrade gracefully as well, but there are three problems with that:

      1. You have to create your menu twice, using noscript tags.

      2. It’s going to degrade more often in JavaScript, because fewer browsers will have JavaScript functioning than CSS.

      3. While for some people and in some instances it will be easier and/or quicker to create the dynamic menu with JavaScript, in most cases it won’t because you need to apply CSS styles anyway, and maintaining the navigation tends to be more work later on with JavaScript because when the appearance of it needs to be changed you have to change both the JavaScript and the CSS.

      Just use CSS. It’ll make things much easier.

      • #2505321

        AJAX

        by erik_little ·

        In reply to CSS . . .

        Learn AJAX and this conversation is obsolete!

        Erik

        http://www.afcc1.com

        • #2505292

          This should be good. NT

          by tony hopkinson ·

          In reply to AJAX

          ..

        • #2505279

          This should be good indeed!

          by wondrouswebs ·

          In reply to AJAX

          AJAX – Asynchronous JavaScript and XML. ‘Nuff said.

        • #2505184

          not AJAX

          by jaqui ·

          In reply to AJAX

          unless you want non functionality in your website.

          the J in AJAX is JAVASCRIPT.

        • #2505150

          Say what?

          by apotheon ·

          In reply to AJAX

          I think Tony’s “This should be good” comment was in reference to the fact that you don’t seem to have much of a clue what you’re saying.

          AJAX: Asynchronous JavaScript And XML

          Essentially, all AJAX means is that you’re using the JavaScript XmlHttpRequest object to facilitate asynchronous data transfer and page rendering between client and server systems.

          Normally, to alter the visible content on a page with JavaScript without reloading the whole page you need to send all content that you may end up using when the page is first loaded, and keep the stuff you’re not immediately showing stored on the local system to be injected into the viewable page by JavaScript as needed. This severely limits the ability to access new data without reloading the page, as you typically don’t want to send all the data in (for instance) an entire MySQL database to the client when the page is first loaded. This could at times be gigabytes of data, even if the client will only ever actually display data derived from a few kilobytes of that data.

          With AJAX, you can load up the page, and use asynchronous data transfer traffic dynamically triggered by actions on the client side to fetch more data that the page’s JavaScript can then use to alter the content of the page as needed. This can be very useful for implementations of systems such as Google Maps (for instance), where you don’t want to load maps of the entire world at all magnifications into the client system just so someone can drag the map focus and change magnification at will.

          For menu design, however, AJAX is just about completely useless. You don’t want to have to wait for HTTP requests to be sent across the Internet, and to wait for responses, every single time you roll over another menu item. The total data needed to render every single part of a page’s navigation is a pittance, so there’s no reason to avoid sending it all to the client when the page is first loaded.

          None of that has anything to do with the problem of maximum accessibility on the client side. If a given client has JavaScript turned off, it will stop AJAX from working, and if you don’t design for graceful degradation people who don’t have JavaScript enabled in their browsers still won’t be able to make use of your wonderfully dynamic navigation menus. In fact, if anything, AJAX imposes an even greater burden on the web developer to deal with issues of graceful degradation when the client does not support client-side scripting for one reason or another. Have you tried using Google Maps with JavaScript turned off lately? The reason the click-and-drag functionality doesn’t work is simple: AJAX. You need JavaScript enabled to allow for that sort of dynamic behavior, and AJAX implies JavaScript. Not too long ago, Google Maps didn’t degrade gracefully at all — if you didn’t have JavaScript turned on, Google Maps was just plain broken. Apparently, Google wised up a bit and programmed around that little issue.

        • #2505069

          You thought right

          by tony hopkinson ·

          In reply to Say what?

          AJAX is yet more money poured down the rat hole of rich clients over HTTP.

          It will never be any good.

        • #2505093

          Anybody else click on Erik’s link?

          by cincybones9 ·

          In reply to AJAX

          I tried it, and was directed to a page with no functionality or links at all – just a .png in the upper left corner. What’s this? I wonder. So I check out the source code. What the heck – there isn’t much – I’ll cut and paste it for you:

          Seems some .aspx form is supposed to load, but I don’t see where this form’s tag is – maybe that’s why it doesn’t work. This should be good, indeed, Tony. Learn AJAX if you want, but learn HTML first. Learn Javascript if you want, but CSS is a part of HTML, and thus, now that most modern browsers support it well, an integral part of the World Wide Web.

          I use a little JS myself on my band’s website, but only for the photo gallery – if people want to see my band photos, they must enable JS. The important parts are not script-reliant.

          Droolin – I sympathize with your attitude: who needs a lot of fancy gew-gaws? Glitz and flash (and Flash) are no replacement for content. Fancy presentation elements can enhance a viewer’s Web experience, or they can totally detract from it. It all depends on whether those elements are appropriate to the content, and handled with skill and an aesthetic sense.

          Bones

        • #2505068

          Couldn’t be bothered

          by tony hopkinson ·

          In reply to Anybody else click on Erik’s link?

          To be quite honest. I know teh shape of AJAX but not the detail and I knew Jacqui and Apotheon at least would drop the hammer on him.

        • #2505036

          actually . . .

          by apotheon ·

          In reply to Anybody else click on Erik’s link?

          The /form tag is there. What’s missing is any visible form elements, a Submit button (or equivalent functionality), or any page content at all other than the image. All that’s there is a single hidden form input element with a predetermined value.

          At least he got the document type declaration right — but I imagine that was automatically generated by some GUI tool.

    • #2504762

      avoid

      by jaqui ·

      In reply to CSS or Javascript or ….

      any active clientside scripting if you want a site to be truly accessable.
      flash, javascript or activex controls all break accessability.

      if the site visitors client app can’t handle css, it still displays the contents, just not the styles.
      if the client’s app cannot handle javascript, they get a blank page.
      [ my preferred browser doesn’t handle either css or javascript, nor any other rich website technology, like flash, video clips or audio clips ]

      I like the no bells and whistles fast page loading of lynx.
      I like getting to content without the bloat.

    • #2505487

      Chose CSS.

      by motoridder ·

      In reply to CSS or Javascript or ….

      I use CSS in my work (web design) because it’ s features like the ease of using it, quick time to learn it (if you’re a beginner) and the interoperability with a lot of browsers (at this moment, the summary that you wrote isn’t fair to the CSS user comunity, because in the entire world, a very small part of the internet community uses an old and “past” version of Internet Explorer let’s say…

      • #2505482

        both have there own issues

        by deonact ·

        In reply to Chose CSS.

        Hi Guys

        This is all good and well, trying to get out which is best to use and which will work, I think you can only determin this if you know who is your target market, and then adjust your coding accordingly, Just look @ your stats of your website, then you will know what type of people come to your site and the capabilities they have!

        does this make sense?

        • #2505428

          Sure

          by tony hopkinson ·

          In reply to both have there own issues

          you could count up the failures, because people didn’t have scripting enabled.

          I think the main point is you can design round CSS limitations (more correctly constraints), but the only way to get round the massive scurity hole that is client side scripting at the moment is not to use it.

          I use the NoScript extension on FF, so a scripted site I haven’t explicitly marked as allowed won’t work. That means I’ve got to see enough, to decide to allow it. If I don’t, I ain’t.
          So redesign so a far too complex for the web menu does not go off the page vs lose your audience, not a hard choice is it?

        • #2505375

          Sure – a different view

          by pmpsicle ·

          In reply to both have there own issues

          Yes, knowing your customer would be the smart way to do it …. but then we wouldn’t be able to argue over our personal preferences.

        • #2505370

          Sure – a different view . . . continued

          by wondrouswebs ·

          In reply to Sure – a different view

          Exactly. I am still of the perspective that, even coding for a very tech savvy group, CSS is better simply because the user will still see the menu items – they just won’t be as pretty. The availability is there regardless – period. It greatly minimizes the need to worry about software versions or user preferences, it is beautifully clean and it is extremely easy to understand.

    • #2505476

      Look @ CSSPLAY.CO.UK

      by alanholm ·

      In reply to CSS or Javascript or ….

      Besides menus, lotsa good CSS stuff that mostly work with most browsers (& NO JS).

      The point about JS being switched off & making JS menus invisible mentioned in another reply is worth considering…

      The stuff at CSSPLAY degrades gracefully & there will still be some navigation available even if CSS is NOT supported by really primitive browsers (since mostly just CSS styled basic HTML that any browser can at least understand – even Lynx).

      • #2505342

        Prefer CSS but use JS

        by persco ·

        In reply to Look @ CSSPLAY.CO.UK

        I prefer CSS for all reasons posted here. I primarily use JS as it so much easier to maintain over dozens of pages using one external file. Haven’t figured how to do this with CSS.

        • #2505280

          Prefer CSS but use JS???

          by wondrouswebs ·

          In reply to Prefer CSS but use JS

          How is that different from using external style sheets?

        • #2505229

          Externals different

          by persco ·

          In reply to Prefer CSS but use JS???

          The links for the JS menu can be stored in one external file assuming same menu for all pages. External style sheets only hold the styles, not content links for menu.

        • #2505143

          What do you use on the server side?

          by apotheon ·

          In reply to Externals different

          Whatever you use for server side development is what you’d use to insert the menu content that is then styled by the CSS. For instance, you can use either PHP include() or require() statements to draw from a single menu page, if PHP is what you’re using on the server side. If you haven’t used anything on the server side so far other than static HTML pages, you may want to at the very least look into the use of SSI (Server Side Includes). Using something like SSI, PHP, Perl/CGI, et cetera to generate your pages on the server side before they are sent to the client will in the long run greatly increase maintainability and eliminate much of the work you’d otherwise have to do in putting together a complex website. If you’re just doing everything with static HTML or XHTML pages, you’re duplicating a lot of markup.

          Here’s a [url=http://arc.apotheon.org/cheats/php.php][b]PHP tutorial[/b][/url] for you, if you’re at all familiar with the basics of (real) programming. If not, you may want something that touches on those basics in more depth. PHP can get you started for simple web development, as it serves excellently for simple dynamic webpage templating. If/when you end up wanting more complex server side web programming capability, you should look into languages a bit better at the heavy lifting such as Perl, Python, and Ruby.

          The simple answer to your problem is, in short, to do something like the following.

          1. Create your menu, and save it as a separate page. You can name it pretty much whatever you want — for instance, it might be “menu.txt”. Its contents might be something like this:

          [b]<div class=”menu”>
          <ul>
          <li><a href=”page1.php”>link one>/a></li>
          <li><a href=”page2.php”>link two</a></li>
          <li><a href=”page3.php”>like three</a></li>
          </ul>
          </div>[/b]

          Name the page on which you’ll stick the menu so that it ends with .php rather than .html so that the server knows what to do with it.

          3. Wherever you want the menu code to appear, add in a PHP include statement, probably using the require() or require_once() function. It would probably look something like this:

          [b]<?php
          require_once(‘menu.txt’);
          ?>[/b]

          4. Voila, you’re in business. Every page that has that PHP statement in it will be served to the client as though the contents of menu.txt were there, instead of the section of PHP code between [b]<?php[/b] and [b]?>[/b]. It’s that simple.

          By the way, there’s also another step before step 1 above:

          0. Make sure the webhost or webserver you’re using supports PHP. If not, you may want to check into what server side programming language it [i]does[/i] support, and use that instead. Webhosts in general almost universally support PHP for server side web development (no matter what else they may or may not support), however, so you’re probably okay using PHP. Perl/CGI is also ubiquitous. Ruby on Rails, Python, and mod_perl are less common.

        • #2505134

          What do you use on the server side?

          by persco ·

          In reply to What do you use on the server side?

          Thanks for the very informative response. Currently I am using JS to insert the menu links. I have a site that is well established and bookmarked widely in my specific area of interest. To implement extensions other than htm would break lots of bookmarks.
          My host is Earthlink and I have yet to enable embedded php there. As I add new pages I am implementing php for the very reasons you gave. And it is much more friendly to me than client side rendering.

          I plan to do a major face lift soon and will most likely do the whole site in php.

          Again, thanks for information.
          And as a footnote, I am comfortable with most languages, just as age creeps up I am getting lazier.

        • #2505083

          mod_python

          by jaqui ·

          In reply to What do you use on the server side?

          you do know that you can use mod_python even if the webhost doesn’t support it?
          it can be enabled through an .htaccess entry in yur site root, you only have to upload a compatable* version of mod_python to your site.

          *compatable with both os and server version

        • #2505034

          eww

          by apotheon ·

          In reply to mod_python

          Why would I do that when there are perfectly good languages like Perl available?

          /holy-war

        • #2491754

          because

          by jaqui ·

          In reply to mod_python

          you are not familiar with perl.
          or you want to use a site script that is in python.

          I only pointed it out because most hosts don’t have mod_python installed, and you don’t have to search to find one if python is the language of choice.

          I know you personally would not use python, unless the pay scale was enough. 😉

    • #2505259

      CSS for security

      by mccoypauley ·

      In reply to CSS or Javascript or ….

      Security guru Steve Gibson has looked at this from his “never surf with scrips turned on” position and developed a menu system in CSS. His page discusses the issue and provides a public domain menu in CSS.

      http://www.grc.com/menu2/invitro.htm

      P.S. If you’re into security, this is the place.

Viewing 9 reply threads