Menu
Which option is best:
Have an element in the markup, hidden with CSS. If JS is enabled, show that element.
Have no element in the markup and create it on the fly, if JS is enabled.
If the user doesn't have JS, I don't want a div to be shown. My question isn't how to code the different cases, it's which is the best and why.
EDIT: When I say "best" I mean support your answer with why it's the best for you. Can be speed/semantics/etc. What I want is to be able to have a better look at the pros and cons of each one. Also the speed is hardly an issue because it's only one element so it would be like milliseconds.
For the first option, it's probably faster, but then we have unnecessary markup and CSS rules. Because if there is no JS, there would be no point in having the element at all, much less hiding it.
Now the second option, even though it might not be as fast, I keep the different parts separate and only really load what has to be loaded.
544
Style display property is used to hide and show the content of HTML DOM by accessing the DOM element using JavaScript/jQuery. To hide an element, set the style display property to “none”. document.
visibility:hidden hides the element, but it still takes up space in the layout. display:none removes the element from the document. It does not take up any space.
The visibility property allows the author to show or hide an element.
You can hide an element in CSS using the CSS properties display: none or visibility: hidden . display: none removes the entire element from the page and mat affect the layout of the page. visibility: hidden hides the element while keeping the space the same.
Completely hiding elements can be done in 3 ways: via the CSS property display , e.g. display: none; via the CSS property visibility , e.g. visibility: hidden; via the HTML5 attribute hidden , e.g. <span hidden>
DOM manipulations are the most expensive. Showing existing code is faster than injecting it.
105
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
