CODEWITHSUNDEEP
htmlcss
user1032531
user1032531

Reputation: 26281

How should I hide HTML for non-JavaScript enabled browsers?

How should I hide HTML for non-JavaScript enabled browsers? I was thinking of something like the following, but it does not work with my FF browser, nor even validate. Any thoughts? Thanks

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <body class="wrap">
        <noscript>
            <h1>JavaScript is turned off in your web browser.<br />Turn it on to use this site, then refresh the page.</h1>
            <style type="text/css">
                body { display:none; }
                noscript { display:block !important; }
            </style>
        </noscript>
        HTML for JavaScript only browsers goes here...
    </body>
</html>

Upvotes: 2

Views: 125

Answers (1)

JAre
JAre

Reputation: 4756

Should be like this

<body class="wrap">

    <noscript>

        <h1>JavaScript is turned off O_o</h1>

        <style type="text/css">

            .onlyscript { display:none; }

        </style>

    </noscript>

    <div class="onlyscript">HTML for JavaScript only browsers goes here...</div>

</body>

Cuz this 

        <style type="text/css">
            body { display:none; }
            noscript { display:block !important; }
        </style>

is really confusing construction and unjustified "!important;" use. That can cause problems in future. It's better to be plain instead of making smartass bug farms :)

Upvotes: 3

Related Questions