Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Nov 2004
    Location
    Netherlands
    Posts
    87
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Detecting CSS Capability

    Well, this may sound really stupid, but is there a way to detect if a browser has CSS capability? Could you just test in javascript for that_object.style?

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Maybe, but why?

    I must admit I really know rather little about JavaScript, but I guess you could detect the availability of certain properties in such a way.

    What I'm really curious about is: why would you want to? There's a number of ways to feed adapted style sheets to ancient browsers; if a browser doesn't support any CSS, it'll simply ignore it, and for browsers lacking specific support of certain properties, or misinterpreting them, there are CSS hack and filters.

    The whole concept of browser sniffing has proven to be a misconception in numerous cases; I don't think reintroducing it for CSS support sniffing would be such a good plan.

    If you really want to pursue the JavaScript approach, though, I think one of the JavaScript forums might yield a better response. Please don't cross-post; I'll request a moderator to move this thread.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #3
    New Coder
    Join Date
    Nov 2004
    Location
    Netherlands
    Posts
    87
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, thanks. I was just curious because my whole design was practically based on CSS and I didn't know how compatible it would be with older browsers, so I came to the conclusion of detecting CSS capability and displaying the page accordingly. However, this dosn't seem like such a great idea, now that you mention it.

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Code for standards

    It's as they always say: "code for standards, not for browsers".

    This doesn't mean that you don't have to make some effort to acommodate browsers with partial or no CSS support, but if the page's structure is solid and the semantics are firmly in place, the page should still be usable even without CSS, albeit not that pretty.

    Also, don't forget that depending on JavaScript makes this detection fail for a certain percentage of browsers that don't support JavaScript or have it disabled or blocked in some way. Again, not the end of the world, but it shouldn't hinder the site's usability.

    Okay, I'll get off my soap box now...
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I can see where you're coming from, but consider - what would you do different if CSS were not supported?
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Who?

    Who- me? Or Dr. Evil?
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #7
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Dr. Evil - it was just a general throwback to consider - "what would you actually do if you could do this"

    Should have used a [quote] ...
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #8
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Right

    Ah.

    Good question, though.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #9
    New Coder
    Join Date
    Nov 2004
    Location
    Netherlands
    Posts
    87
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I can see where you're coming from, but consider - what would you do different if CSS were not supported?
    Sorry it took a little while getting back... Well, I originally had a bunch of <div>s that were hidden, but, with the capability of CSS and JS, would show up when the mouse went over them under certain circumstances (helps, basically). I was thinking that if CSS and/or JS were disabled, I would instead have an alert() (if only CSS), or just another web page to display them so as to not create a bunch of weird effects with <div>s showing up in bizarre places because of lack of CSS.

  • #10
    Regular Coder
    Join Date
    Oct 2004
    Posts
    168
    Thanks
    0
    Thanked 5 Times in 5 Posts
    I agree with what Ronald said.

    I would add.....
    Make sure your pages 'degrade gracefully', they may look different in different browsers but the important thing is that they are readable, searchable and navigatable - don't rely on JavaScript or CSS for these aspects of the site.
    Keep in mind the formatting effects associated with HTML tags - don't override them with CSS, for example making a <div> an inline tag with display:inline.
    Make sure your pages are tested in a browser in which script and css are not supported ( Lynx, Links, Elinks, Dillo etc) .
    Text browsers do not support css or client-side scripting but they render tags. A text browser user does not expect, or need, their browser to render fancy effects they want to be able to read, search and navigate content.
    Avoid creating separate versions of your pages - this will make the site very difficult to maintain - just mark your content up logically.

    Ronald can have the soap box back now.

  • #11
    Regular Coder
    Join Date
    Jun 2002
    Location
    Sheffield, UK
    Posts
    552
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Dr. Evil
    Sorry it took a little while getting back... Well, I originally had a bunch of <div>s that were hidden, but, with the capability of CSS and JS, would show up when the mouse went over them under certain circumstances (helps, basically). I was thinking that if CSS and/or JS were disabled, I would instead have an alert() (if only CSS), or just another web page to display them so as to not create a bunch of weird effects with <div>s showing up in bizarre places because of lack of CSS.

    If you make the JS set them as hidden in the first place the script will degrade gracefully.
    "To be successful in IT you don't need to know everything - just where to find it in under 30 seconds"

    (Me Me Me Me Me Me Me Me Me)

  • #12
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Still, there could be times where it's desirable - a scripted, list-based menu for example - in the unlikely but possible circumstance of a client who has CSS turned off but scripting turned on, what they'd get is an unstyled list with dynamic open/close behaviors - and that's not good at all; it would much better in that situation if one could, after all, use scripting to detect whether CSS is available.

    So ... with this discussion as proviso - of when it's not appropriate, and how to degrade naturally through good separation of content, logic and presentation ... here's how to detect whether CSS is enabled:


    Some elements have default properties which are predictable in all browsers. For example, links always have inline display. So if you make a specific link with block-level display, then read its display property out of currentStyle or getComputedStyle - if the value is not "inline" you can deem CSS to be enabled; otherwise you can deem that it isn't.

    It won't work in Safari or early Opera 7 builds, but it works for later opera, moz and ie:
    Code:
    //check that nav styles are enabled
    function cssIsEnabled()
    {
        //reference to test link
        var linkObj = document.getElementById("testLink");
    
        //link display
        var linkDisplay = "inline";
    
        //retrieve the computedStyle display of the link
        //this is mozilla and opera 7.2+
        if(typeof document.defaultView != "undefined" && typeof document.defaultView.getComputedStyle != "undefined")
        {
            linkDisplay = document.defaultView.getComputedStyle(linkObj,"").getPropertyValue("display");
        }
        //retrieve the currentStyle display of the link
        //this is internet explorer
        else if(typeof linkObj.currentStyle != "undefined")
        {
            linkDisplay = linkObj.currentStyle.display;
        }
    
        //if display is not 'inline' then CSS is deemed to be enabled
        //this is also the fallback position if no property is detected
        //which is Safari and Opera <7.2
        return (linkDisplay != "inline");
    };
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •