// [译]渐进增强：纯CSS聊天泡泡

POSTED ON // BY s5s5 // IN First Category // - 评论

原文地址：http://nicolasgallagher.com/progressive-enhancement-pure-css-speech-bubbles/ 作者：Nicolas Gallagher 译者：米随随

聊天泡泡做为一种UI表现形式是广大网民群众所喜闻乐见，但许多教程实现它却总是需要上使用非语义的HTML或者JavaScript。而本教程中的各种聊天泡泡只需要使用到CSS2.1来构建，并用CSS3来增强效果。不使用图片，也不使用JavaScript和更加不使用当前语义没用到的HTML哦。 在CSS文件中有大量对代码的注释，可以让你方便的看懂这些代码。（译者：在翻译时作者要求DEMO页面要用原先的网址，所以这些注释没有翻译，当然当你看完本文，了解清楚实现方式，哪么不看注释也是可以看懂代码。）

查看DEMO：纯CSS聊天泡泡 纯CSS聊天泡泡 只需要简单的HTML代码：

Content
或
Content
 就可以做出以下的聊天泡泡效果： 如果再添加一个子元素，例如
Quote
 再可以做出这样的聊天泡泡效果：

我建议您使用伪类 :before 和（或者） :after 来创建HTML文档中没有写入的DOM并且用CSS来控制他们的表现。（译者：这里就是本文最为关键的一句话了，伪类在非IE的浏览器中竞然可以在HTML中创建一个DOM元素，并且可以用CSS来控制哦~哪么为什么伪类会表形成一个DOM元素呢，可能浏览器为了实现伪类的效果而产生的，这里则被作者发现并利用了。） 再使用CSS3中的 border-radius 和 transform 就可以来表现更为复杂的图形，更详情的说明请看《CSS typography experiment》（译者：本文未翻译）

示例代码 以下代码主要是创建一个有几个最基本的渐进增强型聊天泡泡的DEMO。更多的DEMO请看 纯CSS聊天泡泡 及在 相关CSS文件 使用。

/* 泡泡及小三角
------------------------------------------ */

.triangle-isosceles {
  position: relative;
  padding: 15px;
  margin: 1em 0 3em;
  color: #000;
  background: #f3961c;

  /* 这里是用CSS3来控制圆角和渐变效果 */
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: -moz-linear-gradient(top, #f9d835, #f3961c);
  background: linear-gradient(top, #f9d835, #f3961c);
}

/* 创建三角形（译者：请注意这里，这里就是在控制伪类所创建的DOM元素） */
.triangle-isosceles:after {
  content: "\00a0";
  display: block; /* 针对 FF3.0 */
  position: absolute;
  z-index: -1;
  bottom: -30px;
  left: 50px;
  width: 0;
  height: 0;
  border-width: 15px 15px;
  border-style: solid;
  border-color: #f3961c transparent transparent;
}

一些说明： 本方法是一个渐进增强的过程。首先是创建一个简单的层，然后是用伪类来实现泡泡的“小三角”，然后用CSS3来实现圆角及渐变背景。层、伪类、圆角、渐变背景这四个特性会根据浏览器的渲染能力而有不同的体验。 所以，不充分支持CSS2.1（如IE6和IE7）或不充分支持的CSS3（如IE8）的浏览器，他们将无法让用户体验到出最好的效果。

关于Firefox3.0的提示： FF3.0支持的CSS2.1的伪类生成的DOM，但不支持对生成的元素的定位。DEMO中的一些例子我认为在FF3.0中是不能接受的，即FF3.0不能处理最基本的聊天泡泡。根据NetApplications公司2010年3月的统计，FF3.0浏览器目前约有2％〜4％的市场份额。所以应用本技术之前，应该考虑FF3.0在你的访问者中的重要性。不过，最终它将成为一种罕见的浏览器。但对于FF3.0本文中的技术没有更好的支持方案。

米随随 书于深圳