Honestly, I hate advertisements, almost all sorts of advertising methods such as banner advertisements, popup advertisements and pop-under advertisements. It's space-consuming, bandwidth-hogging, distracting, and truly unfriendly to my everyday surfing experience. I'm sure others might think the same perspective.
However, I understand that advertising is important too, playing its role to keep the web spinning. Without advertising, there will be no free email, free web content, and free online services. As important as it gets, advertising has gone too far and caused problems among Internet users. Advertisements graphics are getting larger, not only in file size but also their dimensions. Popup advertisements are getting rude to clutter the screen until they distract the user's concentration. Advertisements tend to get more animated, causing various accessibility problems to visually-disabled people.
This phenomena leads us to have no other choice but to block all these pests, using some filtering software widely available on the web. Of course, webmasters don't want this to happen as they rely on advertising to support their server bills and maintenance.
Fortunately, I've found a win-win solution for both the web surfers and the webmasters. This solution is bandwidth-friendly, and fully accessible, made possible with just a few CSS codes, applicable to all types of banner advertisements. Shown below are the codes and some comments:
HTML codes:
<div class="banner">
<a href="http://getfirefox.com/" title="Get Firefox">
<span>Advertisement : Mozilla Firefox. Take back the web. Download now!</span>
</a></div>
CSS codes:
@media screen,projection{
.banner,
.banner a{
/* dimensions of the banner */
width: 468px;
height: 60px;
display: block;
margin: auto; /* optionally, align the banner to the center */
}
.banner a span{
display: none; /* hide the text */
}
.banner{
/* display the non-animated banner image, by default */
background: transparent url("fox_banner.png") no-repeat;
color: inherit;
}
.banner a:hover{
/* display the animated banner image, only when hovered */
background: transparent url("fox_banner.gif") no-repeat;
color: inherit;
}
}
Most browsers will load the non-animated graphic first on the page. They will only load the animated version when hovered.
This method speeds up page loading because the browser downloads the lighter version of the banner. It will only download the animated version, which is bigger in file size, only on demand, by hovering over the banner link, which is quite bandwidth-friendly.
As the default presentation of the banner is non-animated, it doesn't distract your concentration reading the web page.
The banner image is displayed, linked via a stylesheet. There is no img
tag used.
This method is very good, because it (probably) works in any web browsers and web applications, including text-based browsers. In non-graphical, older or CSS-disabled browsers, the banner degrades into a normal text link, which is also quite an effective advertising technique.
Using CSS, you have better control on the presentation and layout of the banner on the page.
The banner couldn't be blocked by any filtering software. Most ad-blocking/content-filtering software block advertisements by detecting the path of the graphic and the standard banner dimensions. None of them reads the stylesheet.
As there is no img
tag used, this method is forward-compatible in web standards, because the img
tag will/might be removed from the yet-to-be-finalized XHTML 2.0 specification.
You couldn't block this type of banner advertisement, unfortunately. Even if you can, it will not be effective enough, because it will conflict with other non-related sites too. For example, Mozilla Firebird Firefox users could block this advertisement by adding the following codes to the 'userContent.css' file:
div[class="banner"]
.banner a{
display: none !important;
}
... or:
div[class="banner"]
.banner a{
background-image: none !important;
}
However, this might cause other sites which use the same class
value of the div
tag to render unexpectedly, maybe partially missing web content.
Some people might still be able to block this advertisement, though. But, don't worry. As long as you don't assign site-specific class
or id
values to any elements on your page, you are safe. Even safer, you can change the value of the class
attribute of the div
tag to other more commonly-used values such as 'head', and not using advertisements-related values such as 'ad', 'adbanner' or 'advertisement'. The most ultimate method is not to use any class
or id
values at all, like this:
HTML codes:
...
<body ... >
<div>
<a href="http://getfirefox.com/" title="Get Firefox">
<span>Advertisement : Mozilla Firefox. Take back the web. Download now!</span>
</a></div>
...
</body>
...
CSS codes:
@media screen,projection{
body>div:first-child,
body>div:first-child a{
...
}
body>div:first-child a span{
...
}
body>div:first-child{
...
}
body>div:first-child a:hover{
...
}
}
The codes above uses pattern matching, which involves the child selector and the :first-child
pseudo-class, to refer to an element and assign the banner as the background image of that element. Unfortunately, the example above cannot work in Internet Explorer (up to version 6) and other older graphical browsers.
As an aside, this type of advertisement may also be blocked by manipulating the URI id.
Opera 7.10 somehow couldn't support GIF animation of a background image applied from a stylesheet. Of course, this is a bug, which should be fixed, and might already been or will be fixed in Opera 7.20 latest versions of Opera.
An apparent critical flaw with this method involves screen readers, such as JAWS, which allow the browser to render the page with screen media styles applied. JAWS reads the screen as it is seen in a graphical browser. Since the contained text is hidden using display:none
, it also gets hidden from JAWS, assumed not be read by it too. [Source: Background Image to Replace Text]
Alternative methods do exist.
Of course, there are always advantages and disadvantages in anything. If you like this method, use it. Don't like it, just leave it. But, please think twice. Read again.
Note: The banner images on this page has been changed and updated for Mozilla Firefox, replacing moz_banner.png and moz_banner.gif. The logos used in the banners are trademarks of the Mozilla Foundation.