3

We develop an engine that serves ads to different mobile devices and websites. The ads are simply HTML markup with banners and/or some javascript. Sometimes we need to include a hidden pixel in the ad markup, to get a notification that the ad was actually displayed on end-user's device.

The pixel is basically a simple HTML image tag: 

<img src="http://the-notification-url" />

The question is: what css should be used to: 1) hide the pixel on user device 2) make sure the pixel won't take any space and won't affect position of other HTML elements 3) be sure that ALL the browsers will actually try to download the pixel (i.e. trigger the 'src' URL)?

I can see two alternatives:

display:none;

or

visibility: hidden; position: absolute;

Are these alternatives the same in terms of the three goals we want to achieve? The most important goal is in fact the third one. Is it guaranteed that the img element having display:none or visibility:hidden will be always downloaded by all popular browsers (both windows/linux PCs and mobile devices ios/android)?

Josh Crozier
  • 202,159
  • 50
  • 343
  • 273
PawelRoman
  • 5,551
  • 4
  • 25
  • 36

1 Answers1

6

You should use display: none; as display: none; won't take up space on the document, whereas using visibility: hidden; will reserve the space for the pixel..

Demo (Using display: none;)

Demo 2 (Using visibility: hidden;)

Using position: absolute; is fine with visibility: hidden; but if display: none; is doing the job, than you don't have to declare two properties... And also, whatever you do, your img will be requested anyways..

Also, you might like to know whether images are prevented to download using display: none; than you are wrong, CSS display: none; has nothing to do with image loading.

Have a good read here

Community
  • 1
  • 1
Mr. Alien
  • 140,764
  • 31
  • 277
  • 265
  • Thanks! You get +10 karma :) – PawelRoman Jan 22 '14 at 10:50
  • 2
    This possibly needs updating according to the **good read** referenced: "Browsers are getting smarter. Today your browser (depending on the version) might skip the image loading if it can determine it's not useful." (June 18th, 2014) – banderson623 Apr 14 '15 at 20:30
  • @banderson623 not "possibly" -- you're completely correct. this is no longer correct. A bummer for JS widgets that track events with pixels.... "BROWSERS Y U GET SO SMAHT?!?!" ;) – Ryan Angilly May 19 '15 at 17:50