Grow your CSS skills. Land your dream job.

Good or bad practice to hide elements with CSS, as opposed to doing it with jQuery…

  • # May 16, 2013 at 6:26 pm

    In a situation where I have elements on my website that need to be hidden first before a fadeIn(), or slide(), etc.

    Is it ever okay to hide the elements with CSS, instead of using jQuery to hide?

    My concern, if I hide the elements with CSS, then if someone visits the website who doesn’t have JavaScript turned on, they will never see the element. But is that a real concern?

    # May 16, 2013 at 6:39 pm

    You could use a `.no-js` class on your `` to target users that have JS disabled and then make sure it’s visible for them.

    You simply remove the class with JS and then users that have JS enabled will have it hidden for them. This type of practice is pretty common this days, especially when using Modernizr (I believe it has this functionality built in).

    # May 16, 2013 at 8:45 pm

    coincidentally i was just thinking about this exact same thing a few days ago. I personally think it’s best to do anything with CSS as apposed to Jquery. I found out that CSS animations and transitions run a little smoother than Jquery’s .animate(). And CSS also has shorter code to do the same thing jQuery does. Not that it will mean much of a difference but the browser reads shorter code faster. So go with CSS whenever possible, and if not go with jQuery.

    # May 16, 2013 at 9:40 pm

    Modernizr is a great tool. I use it in all my projects.

    This is how html markup looks when JavaScript is OFF:

    In your CSS you would target users with JavaScript off, like so `.no-js`.

    This is how html markup looks when JavaScript is ON:

    The classes that get added depend on what features users browser supports, so you can hook into something like `flexbox` and provide enhanced experience.

    You can custom build Modernizr, supporting only features you need. This decreases file size. Modernizr also provides HTML5shiv and many other things.

    # May 16, 2013 at 11:31 pm

    I would love to use Modernizr, but alas the CMS I’m using is pretty restrictive and I won’t be able to change the portion.

    Also, I really do like CSS animations, however, I have to consider backwards compatibility with IE8.

    # May 17, 2013 at 5:27 am

    If you only need the `no-js` to `js` class on html, this will do:

    (function(h){h.className=h.className.replace(/bno-jsb/,’js’)})(document.documentElement);

    if the CMS allows embedded scripts.

    # May 17, 2013 at 11:30 am

    Thanks for the script CrocoDillon, but I don’t even have “no-js” in the HTML tag.

    # May 17, 2013 at 3:38 pm

    I believe the answer to your original question is that there’s not really a problem with hiding elements with CSS before you do a jQuery action on them. But keep in mind that sometimes, when an element has property display:none, jQuery won’t always recognize it.

    If you would hide them with jQuery, then you run the risk that the page loads (with the elements visible), then as soon as the jQuery kicks in they will be hidden, and then you will make them visible again with an animation. Hardly efficient, in my view.

    When you add “no-js” to your HTML tag (you’ll have to do this yourself) and then replace that with “js” as soon as the Javascript kicks in, then you can hide the element with CSS for sure: .no-js .element {display:none;}.
    Then JavaScript kicks in and the “no-js” class is removed, so the element won’t have the property display:none; anymore.

    Having said all this….. I personally think that Javascript is an essential part of the web, much like images and a modern browser. Anyone who disables their Javascript should just accept they won’t get the full experience.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".