23

I'm for years using something like this in my HTML for elements which should be hidden:

<div style="display: none"></div>

It's ok, but I can't stand in-line styles anymore.

  1. Hiding elements programatically in JavaScript window.onload event is too late -- it will flash on the screen.

  2. I can create CSS class 'hidden', but with browser's aggressive loading strategies (like in Opera) the block may appear for a second (before CSS is loaded).

Is there any better way?

pimvdb
  • 151,816
  • 78
  • 307
  • 352
artvolk
  • 9,448
  • 11
  • 56
  • 85
  • 13
    You've made an awesome case for using in-line styles. – Fosco Aug 22 '11 at 13:59
  • If the "block may appear for a second (before CSS is loaded)" that would mean the whole page would appear without any styles. Does that really happens in opera? – kapex Aug 22 '11 at 14:02
  • *Possible* duplicate of [jQuery - Best way to hide element? ( to prevent the element from flashing before actually hiding it )](http://stackoverflow.com/questions/7141359/jquery-best-way-to-hide-element-to-prevent-the-element-from-flashing-before) – David Thomas Aug 22 '11 at 14:02

6 Answers6

14

As far as I know the class="hidden" method is the best and most commonly used. I suggest you use class="hidden".

"but with browser's aggressive loading strategies (like in Opera) the block may appear for a second (before CSS is loaded)."

I don't use Opera, but if any browser loaded the page before applying styles then a lot would look wrong, not just your hidden elements. I don't know of any browser doing this.

Robin Winslow
  • 10,908
  • 8
  • 62
  • 91
  • -1: see e.g. https://stackoverflow.com/questions/4172281/force-browsers-to-load-css-before-showing-the-page , from 2010 (a year before the question was asked) – Clément May 08 '19 at 03:03
  • @Clément The question was simply about how to hide elements, not about a general [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content) problem. FOUC has a long history, but generally if you're getting it you should change how your styles are loaded. Simply linking to CSS from the `` of your page is basically completely safe in all browsers. But either way, FOUC is beyond the scope of this question. – Robin Winslow May 08 '19 at 16:04
6

I have recently started using node objects, and I like this approach more and more. This way you don't have to use hidden HTML elements, you just place, for example, an anchor:

<a name="some-anchor" id="some-anchor-id" />

and then replace it with a created node. This way you won't have to worry about elements flickering on load, because there won't be any.

Igor Zinov'yev
  • 3,676
  • 1
  • 33
  • 49
  • 4
    Is this also search engine friendly? If you insert all searchable content of your website this way, crawlers may not find it. – pimvdb Aug 22 '11 at 14:05
  • Yes, you're right, but then again, the search engines will see only the initial content of blocks with `class="hidden"`. If you have some dynamically changing content, it won't be accessible to crawlers anyway. – Igor Zinov'yev Aug 22 '11 at 14:07
  • @IgorZinov'yev This is situation specific, but I think the use of `class="hidden"` suggests you have static content that is initially hidden in the page and then gets displayed on a user-action. And that static content probably needs to be available to search engines. If you were planning to load content via Ajax or switch out content, `class="hidden"` wouldn't normally be needed. – Robin Winslow Aug 22 '11 at 16:40
2

Depending on what the element is, it might be acceptable to generate and insert the element using javascript after the page has loaded (rather than hiding it after page load). Just a thought, although it wouldn't degrade gracefully for users without javascript enabled...

Dan
  • 3,750
  • 5
  • 24
  • 38
  • About graceful degradation - the same goes for `class="hidden"`. Without JS users don't get anything. – Igor Zinov'yev Aug 22 '11 at 14:05
  • @IgorZinov'yev but then you have useless mark-up in your HTML that has no business being there. It's dead code. – Raynos Aug 22 '11 at 14:06
  • That's a good point. This is why i typically hide the elements on page load, so the information is searchable, and accessible with JS disabled. – Dan Aug 22 '11 at 14:36
2

You could add to the hidden style a fixed position which would bring it out of a browsers window. This may be a solution to avoid having the div blink in Opera.

For example:

.super_hide{
    position:fixed;
    top:-1000px; /* you would need to know how height the content is or put something huge*/
}

Hoping this will help!

No_or_yes
  • 665
  • 1
  • 6
  • 21
  • Most of the time I'd like the hidden block to be shown later in the place where it was hidden... – artvolk Aug 23 '11 at 09:51
  • You could then delete the class thanks to JavaScript, doing so the element will appear were it's supposed to be. – No_or_yes Aug 23 '11 at 11:44
  • This seems to trigger reflow, I don't know if this will be a problem, just a thought – artvolk Aug 27 '11 at 10:56
  • helped to solve my specific problem thanks for this! I needed my element to be properly rendered without visibility or display sideeffects. – Basti Sep 23 '22 at 15:47
1

If you have a HTML only page those elements would be shown?

These elements are shown to screen readers by default, that's not very nice or accessible is it?

If you have HTML+CSS only page you can't unhide these elements, then there's no point in them apart from black hat SEO tricks.

If you have a HTML+CSS+JS page then there is value in have them.

There is only value in having them when you have JS enabled. This means they should _exist in the javascript

Use javascript to create these elements and inject them in the DOM.

if your build your website from the ground up using HTML, HTML+CSS, HTML+CSS+JS then you would realize they belong in your javascript code. Feel free to read more about Progressive Enhancement

Raynos
  • 166,823
  • 56
  • 351
  • 396
  • The only clean way of creating complex elements\HTML chunks in JS (trivial elements are not so common) are client templates. The templates itself usually are placed in hidden blocks :) – artvolk Aug 23 '11 at 09:52
  • @artvoik you forgot the DOM. you can easily create complex elements using the DOM. – Raynos Aug 23 '11 at 11:50
  • 1
    When creating complex elements this will be done in JS code, which is bad, because it is not updatable by template designers anymore. – artvolk Aug 24 '11 at 08:20
  • You want the markup of your javascript ui widgets written by people that don't know javascript? No thanks – Raynos Aug 24 '11 at 09:12
  • They do know JS, but in case when I need to render something really complex, say an item of autocomplete with image, title, description, price, additional data like rate, stars (a lot of markup, CSS classes, etc), the client side templates seems to be the only option. And one more thought - I prefer not to put a lot of DOM nodes creations in JS because it this case HMTL is in my templates AND in JS. – artvolk Aug 24 '11 at 13:52
1

You could define the class in of the page. It's slightly cleaner than inline, but you would have to have that single class definition on all pages. But then again, I'd try to use a single dynamic footer/header anyway..

zoomix
  • 915
  • 1
  • 6
  • 11