Home/ Questions/Q 4035368
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T12:05:20+00:00

I guess this is more about SEO than wanting to support browsers with Javascript

  • 0

I guess this is more about SEO than wanting to support browsers with Javascript disabled. I have Javascript/jQuery code that reads in some html and basically displays it much nicer. The html is actually removed (with jQuery’s .remove() function) during the process.

So I hide the html so there aren’t any visual artifacts as the page loads. But now I want to only hide it if Javascript is enabled. I guess the easiest thing is to have some Javascript in <head> that adds the display: none css rule to the appropriate elements.

Is there a better way for dealing with this situation?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Any JavaScript will only work if JavaScript is enabled so no matter how you do it using JavaScript it will always work only if JavaScript is enabled so you never have to test for that.

    That having been said, you can see how it is done in the HTML5 Boilerplate:

    <html class="no-js" lang="en">
... the rest of the page
</html>

    using a no-js class applied to the <html> tag. The class is later removed using JavaScript and a js class is added, both of which you can use in your CSS and HTML:

    <p class="js">This is displayed if JavaScript is enabled</p>
<p class="no-js">This is displayed if JavaScript is disabled</p>

    Or in CSS:

    .no-js #someWidget { display: none; }
.js #someFallback { display: none; }

    If you’re using Modernizr then it will already change those classes for you, but even if you don’t then all you have to do is something like:

     document.documentElement.className =
     document.documentElement.className.replace(/\bno-js\b/,'js');

    It’s a simple and elegant solution and all you have to worry about is CSS classes in your styles and markup.

    • 0