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 9 of 9
  1. #1
    New Coder
    Join Date
    Feb 2003
    Location
    ROMANIA
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How can I use JS to check the browser for CSS support?

    I recently made a popup menu wich is an integration between Java Script and CSS. It works just fine, but...

    In an non - CSS browser, or with CSS disabled, the items in the list (wich should be hidden via object.style.visibility="hidden") show up and cover my page.

    It not big deal to check for browser name and version and make the script work only in IE4+ or NS4+ and above, but the problem is: if anybody, for every reason has decided tot disable CSS in his IE4+, the result will be the same.

    So, I'm asking you: has JS some way to know if CSS efectively are on?

    the

    if (document.body.style)
    {do something...}

    seems to work, but I'm afraid that all this does is to check for a newer version of JavaScript, one that has the style property of the object document built-in.

    What do you think?
    Thanks a lot for any help.
    Claudiu Iacob - Romania

  • #2
    Regular Coder
    Join Date
    Sep 2002
    Location
    Louisiana
    Posts
    576
    Thanks
    0
    Thanked 0 Times in 0 Posts
    try this, don't know if it will work. you might want to try and give a hidden field a style, and then use javascript to test it, like this:

    <input type="hidden" style="color: red">
    <script type="text/javascript">
    if (document.elements[0].style.color != "red") {
    do something
    }
    </script>

    than again that might work if css isn't enabled.

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    Ames, IA, USA
    Posts
    373
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The solution, I think, is to make sure the page renders in a way that is functional if CSS is disabled for any reason.
    Need more emoticons?
    Visit Catman's Private Stock

  • #4
    New Coder
    Join Date
    Feb 2003
    Location
    ROMANIA
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    First thank you all.

    to chrismiceli :

    it will work, even if CSS are disabled: when I write :
    Code:
    <input type="hidden" style="color: red"> 
    <script type="text/javascript"> 
    if (document.elements[0].style.color != "red") { 
    do something 
    } 
    </script>
    I just alter the style property of the object input , wich exists in the JS engine independently of browser settings (i.e. CSS disabled).

    Catman , your solution is always the best, I know, but sometimes (and this time too) is hard enough to aply it.

    Any other sugestions?
    Claudiu Iacob - Romania

  • #5
    New to the CF scene
    Join Date
    Oct 2002
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I like what www.37signals.com does ... (I typically don't like to post someone else's code without permission, but I think I am giving a sufficient amount of credit to 37signals by providing links to the files)

    From their html file....

    <div class="oldbrowsers">
    <strong>Please note:</strong> This site's design is only visible in a graphical browser that supports Web standards, but its content is accessible to any browser or Internet device. To see this site as it was designed please <a href="http://www.webstandards.org/upgrade/" title="The Web Standards Project's BROWSER UPGRADE initiative.">upgrade to a Web standards compliant browser</a>.
    </div>

    From their css file, class "oldbrowsers"....
    .oldbrowsers {
    margin: 0px 0px 20px 0px;
    padding: 0px 0px 0px 0px;
    color: #c00; }

    This way the text (something along the lines of, 'Go upgrade your browser') is visible to only non-CSS browsers. Sorry this isn't what you are looking for, but it is a unique approach.

  • #6
    New Coder
    Join Date
    Feb 2003
    Location
    ROMANIA
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks.

    I thought at this kind of asking the user's help too.

    Basically, such a thing can be included into the very first page of the site, and the users can choose the site version they have access to. Something like:

    "if you're seeing this text, it means that you use an old browser, wich hasn't support for CSS. Click HERE for the plain HTML version of the site."

    Also, using a combination between HTML and CSS I can make the link to the CSS version of the site invisible for old browsers (such as a black text on a black background) and visible for the CSS browsers (such as overriding the color of the text or background).

    This is simple.
    But that just may be anoying enough for the visitors: to have to click on a "enter here" or "here" link, each time they visit my page.
    Claudiu Iacob - Romania

  • #7
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by claudiuiacob
    "if you're seeing this text, it means that you use an old browser, wich hasn't support for CSS. Click HERE for the plain HTML version of the site."

    Also, using a combination between HTML and CSS I can make the link to the CSS version of the site invisible for old browsers
    You have a better answer there in your own words - you can make parts of your site invisible or visible to css or non-css browsers, using css alone; that's all you need.

    If you start with well-formed and semantic [x]html, in which none of the style information is in the HTML itself then that will make your site useable to plain-text and older browsers (not to mention speaking browsers and other less common user agents). By semantic HTML, I mean things like using <h1> - <h6> for headers, using <blockquote> for quotations, using <em> and suchlike - markup which carries meaning independent of what it looks like.

    Then you add the visual design using CSS and javascript and you don't need to worry about how it degrades, because that bit's already sorted. It means you have no need for any of that meaningless "please upgrade your browser" nonsense.
    Last edited by brothercake; 03-02-2003 at 05:46 PM.

  • #8
    New Coder
    Join Date
    Feb 2003
    Location
    ROMANIA
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks, this discussion just gave me an idea to handle my problem.
    Thank you all.
    From my part - this subject is close.
    Claudiu Iacob - Romania

  • #9
    New to the CF scene
    Join Date
    Oct 2002
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Could someone point me to some examples of using semantic HTML with CSS? Do you mean only using CSS elements found in HTML, such as only defining tags like H1, H2, etc? And not using unique CSS elements like '.text_unique' and 'a.text_unique'?


  •  

    Posting Permissions

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