This set of Tricky CSS Questions and Answers focuses on “Suppressing Element Display & Visibility, Image Replacement”.
1. Which of the following will represent browsers in their normal states?
a) CSS ON/Images ON
b) CSS ON/Images OFF
c) CSS OFF/Images ON
d) CSS OFF/Images OFF
View Answer
Explanation: 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.
2. Which of the following represents browsing with no stylesheets applied?
a) CSS OFF/Images ON
b) CSS OFF/Images OFF
c) CSS ON/Images OFF
d) CSS ON/Images ON
View Answer
Explanation: 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.
3. Which of the following technique is also known as Fahrner Image Replacement?
a) CSS ON/Images ON
b) CSS ON/Images OFF
c) CSS OFF/Images ON
d) CSS OFF/Images OFF
View Answer
Explanation: 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.
4. Using negative text-indent is also known as __________
a) The Scott Kellum method
b) The Phark method
c) Radu Darvas Technique
d) The Langridge method
View Answer
Explanation: 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.
5. Using margin is also known as________
a) Fahrner image replacement
b) The Lindsay method
c) Radu Darvas Technique
d) The Langridge method
View Answer
Explanation: 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.
6. Using padding is also known as ________
a) Leon Dwyer method
b) Radu darvas method
c) Lindsay method
d) Langridge method
View Answer
Explanation: 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.
7. Using Small font-size is also known as ____________
a) Lindsay method
b) Leon Dwyer method
c) Levin technique
d) Radu Darvas Shim
View Answer
Explanation: 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.
8. Using Overflow is known as ______
a) The Leon method
b) The Scott Kellum method
c) The Phark method
d) The Langridge method
View Answer
Explanation: 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.
9. Using Absolute Positioning is known as _________
a) The Langridge method
b) The Levin Technique
c) The Scott Kellum method
d) The Leon method
View Answer
Explanation: 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.
10. Using a bogus image is also called as _______
a) The Leon method
b) The Levin Technique
c) Radu Darvas Shim
d) The Langridge method
View Answer
Explanation: 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.
11. Using actual image with inline image method is also known as __________
a) The Langridge method
b) Radu Darvas Shim
c) The Levin Technique
d) Phark method
View Answer
Explanation: In this method, we use the actual image for image replacement. The image has alt text that will be shown when images are turned off. This technique does not seem to be good for SEO. Images will still be visible with CSS turned off and images kept on.
12. Using Pseudo element is known as _____________
a) Nash Image replacement
b) Phark method
c) Radu Darvas Shim
d) The Langridge method
View Answer
Explanation: This technique used the pseudo element to push the text aside.
<h1 class= “replace-pseudo”> Site </h1>.
The pseudo element pushes text aside. The text then overflows and is hidden by using overflow: hidden property.
13. What is the default value of visibility?
a) visible
b) hidden
c) initial
d) inherit
View Answer
Explanation: The default value of visibility is visible, the element is visible. When set to hidden, the element is invisible but it still takes up space, initial sets the property to its default value. Inherit inherits this property from its parent element.
14. Which of the following is only for table elements?
a) initial
b) collapse
c) hidden
d) inherit
View Answer
Explanation: Collapse is only for table elements. Collapse removes row or column. But it does not affect table layout. The space taken up by row or column will be available for other content. If the collapse is used with other elements, it renders as “hidden”.
15. Clip property is not supported in ____________
a) Internet Explorer
b) Chrome
c) Safari
d) Opera
View Answer
Explanation: There is one more way of hiding elements by clipping them. Clip-path property is not fully supported in IE or Edge yet. If using external SVG files for clip-path, support is even more limited.
.hide {clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);}
Sanfoundry Global Education & Learning Series – CSS.
To practice tricky questions and answers on all areas of CSS, here is complete set of 1000+ Multiple Choice Questions and Answers.
If you find a mistake in question / option / answer, kindly take a screenshot and email to [email protected]
- Apply for Computer Science Internship
- Practice Information Science MCQs
- Practice MCA MCQs
- Check CSS Books
- Practice Computer Science MCQs
