Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #44833
    barkins
    Member

    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?

    #135364
    TheDoc
    Member

    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).

    #135371
    Anonymous
    Inactive

    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.

    #135372
    Alen
    Participant

    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.

    #135380
    barkins
    Member

    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.

    #135402
    CrocoDillon
    Participant

    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.

    #135445
    barkins
    Member

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

    #135478
    Senff
    Participant

    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)
  • The forum ‘CSS’ is closed to new topics and replies.