Test:Suppressing Element Display & Visibility, Image Replacement - Class 5 MCQ

There are five major categories for image replacement i.e. CSS ON/Images ON, CSS ON/Images OFF, CSS OFF/Images ON, CSS OFF/Images ON, CSS OFF/Images OFF, Extra Unnecessary Markup. CSS ON/Images ON represents browsers in their normal states and all the techniques should pass their test.

CSS ON/Images On technique is also known as FIR or “Fahrner Image Replacement”. The premise here is to use a span to wrap the text inside the header and use that span to hide the text. It works but we have to use display:none.

Using margin is also used as Radu Darvas technique. This technique also forces the text outside of the browser window but uses margins to do so. The main idea is to apply very large negative left margin and give our header a correspondingly large width.

Using small font-size is known as Lindsay method. Another way to hide text is by making it very small and set its color to the background of the image. This works without affecting accessibility but we can also face SEO penalties because of tiny font size and camouflaged color.

This method also requires an additional <span> element to work. But the <span> element is not wrapped around the text but used to position our image.

This method also requires a bogus image in addition to a usual <span> element to work properly. The image is a 1×1 pixel transparent GIF. The main purpose is to show users the alt text if images are turned off.

CSS OFF/Images ON represents browsing with no stylesheets being applied. Most of the techniques default to regular web text here which is not exactly a fail, but since images may still be turned on.

Using negative text-indent is also known as the Phark method. This is the most common technique that most web developers have used. The main idea is to move the text far outside the browser window by setting a large negative text-indent.

Using padding is known as Langridge method. We push the text outside of our header using padding-top property. The property is to be set to a value that is equal to the height of the logo. But this alone is not sufficient, we have to use overflow: hidden to hide the text.

In this method, overflow property is used to hide the element completely. Using this technique requires to wrap the text in a <span> element just like the other methods. The text is hidden by overflow: hidden property.