在上一篇文章中我们介绍了4种常用的使用CSS来隐藏和显示元素的方法。这篇文章中，我们要介绍4种更为高级的显示和隐藏元素的方法，这些方法只工作在最新版本的现代浏览器中，有一些方法IE浏览器是不支持的。下面是我们在这篇文章中的DEMO所使用的HTML结构。
<figure id="oymyakon">
<img src="img/nastya.jpeg" alt>
<figcaption>Nastya, photographed by Sean Archer</figcaption>
</figure>
<div id="content">
<div>
<p>Located deep in Siberia...</p>
<p>From December to February...</p>
<p>The extreme conditions are...</p>
<p>Surprisingly, summers in Oymyakon...</p>
</div>
</div>
基本的CSS样式如下：
body {
color: #fff;
background: url(px.png) #333;
line-height: 1.4;
font-size: 1.1rem;
}
figure#oymyakon {
float: right; width: 50%;
font-size: 0;
}
figure#oymyakon img {
width: 100%; height: auto;
box-shadow: 0 0 12px rgba(0,0,0,.3);
}
figure#oymyakon figcaption {
text-align: center;
font-size: 1rem;
font-style: italic;
margin-top: 1rem;
}
在这篇文章中，我们要使用不同的技术来隐藏<figure>元素。你可以在DEMO中自己先看一下效果。
Scaling an element to 0
figure#oymyakon { transform: scale(0); }
将一个元素设置为无限小，这个元素将不可见。这个元素原来所在的位置将被保留。
设置scale为1可以使隐藏的元素变为可见。这种过度效果是可以制作动画的。
浏览器兼容：该技术可以在所有现代浏览器中运行，IE浏览器要IE9+。该技术不可以使用在行内元素上，旧版本的浏览器需要浏览器厂商前缀的支持。
HTML5 hidden attribute
<figure id="oymyakon" hidden>
hidden属性的效果和display:none;相同，这个属性用于记录一个元素的状态：
“When specified on an element, hidden indicates that the element is not yet, or is no longer, directly relevant to the page’s current state.”
hidden属性是HTML5的可用属性之一。不同于本文描述的其它方法，hidden属性隐藏元素的所有展示平台，例如打印设备和移动设备。
浏览器兼容：除了IE浏览器，所有的现代浏览器都支持该HTML5属性。
对于IE浏览器，可以使用一个属性选择器来在CSS文件中为该属性提供回退方案。
Zero height and hidden overflow
figure#oymyakon { height: 0; overflow: hidden; }
这个技术是一种传统的隐藏元素的解决方案。它将元素在垂直方向上收缩为0,使元素消失。只要元素没有可见的边框，该技术就可以正常工作。使用这种技术隐藏元素后，元素原来的空间任然存在：虽然元素没有了高度，但是元素还有宽度，可能还有margin、padding等属性，这些都会影响页面的布局。
浏览器兼容：所有浏览器都支持这种技术。
不能再行内元素上使用该技术。该技术中height属性不可以制作动画，但是max-height可以。
Blur Filter
figure#oymyakon { filter: blur(100px); }
IE浏览器完全不支持blur这种技术。这种技术是将一个元素的模糊度设置为0，从而使这个元素“消失”在页面中。使用该技术要注意：
- 模糊文字的效果要比图片要好。
- 图片模糊后会留下一些颜色在页面上，颜色的多少和位置依赖于模糊度和图片的位置。
blur值越高，循环计算的次数就越多，太高的模糊值会严重影响页面渲染的速度，在手机设备上这个技术是不可取的。- 在Firefox浏览器中不需要厂商前缀，Chrome 和 Safari浏览器需要厂商前缀的支持。
- 在所有的IE浏览器中都不能正常工作。
在学习了这篇文章和上一篇文章介绍的隐藏元素的技术之后，你已经有了足够多的方法来在页面上隐藏和显示元素。你要知道，没有一种技术是最好的，每一种技术都有它的优点和缺点，要看你如何取舍。
