Visibility
I recently had an interview where I was asked in CSS how do you make something invisible in CSS. I recalled using Opacity, which has the issue of not working in older versions of IE, but was ignorant of visibility and display. So I took some time and did some research, hopefully next time I get this question I do better :).
In CSS there are three ways to make an element invisible.
visibility:hidden
The first way is visibility:hidden http://www.w3schools.com/cssref/pr_class_visibility.asp
[1]
Here is a simple example of it
<html>
<body>
This is billy
<b>I like to play</b> all day
</br>
This is billy
<b style="visibility:hidden">I like to play</b> all day
</body>
</html>
|
And the results are
The text is now invisible, but it still takes up space.
opacity:0.0
Opacity allows you to set the visibility of an element http://www.w3schools.com/cssref/css3_pr_opacity.asp
[2]
Here is a simple example of it
<html>
<body>
This is billy
<b>I like to play</b> all day
</br>
This is billy <b
style="opacity:0.0">I like to play</b> all day
</br>
This is billy
<b style="opacity:0.25">I like to play</b> all day
</br>
This is billy
<b style="opacity:0.5">I like to play</b> all day
</body>
</html>
|
And the results are
With opacity set to 0.0 we get the same results as
visibility:hidden However in IE8 and
prior this does not work. IE8 and prior
use alpha instead of opacity.
display.none
display.none will allow you to not display an element at all
, it will not take up and space. http://www.w3schools.com/css/css_display_visibility.asp [3]
Here is a simple example of it
<html>
<body>
This is billy
<b>I like to play</b> all day
</br>
This is billy
<b style="display:none">I like to play</b> all day
</body>
</html>
|
And the results are
But here you can see hidden element is not taking up any
space. That is the key difference
between visibility:hidden and display:none
References
[1] CSS visibility
Property
Visited 2/2012
[2] CSS3 opacity
Property
Visited 2/2012
[2] CSS Display and
Visibility
Visited 2/2012
No comments:
Post a Comment