純CSS實現聊天泡泡

聊天泡泡做為一種UI表現形式是廣大網民群眾所喜聞樂見，但許多教程實現它卻總是需要上使用非語義的HTML或者JavaScript。

聊天泡泡做為一種UI表現形式是廣大網民群眾所喜聞樂見，但許多教程實現它卻總是需要上使用非語義的HTML或者JavaScript。而本教程中的各種聊天泡泡只需要使用到CSS2.1來構建，並用CSS3來增強效果。不使用圖片，也不使用JavaScript和更加不使用當前語義沒用到的HTML哦。
在CSS檔案中有大量對代碼的注釋，可以讓你方便的看懂這些代碼。（譯者：在翻譯時作者要求DEMO頁面要用原先的網址，所以這些注釋沒有翻譯，當然當你看完本文，瞭解清楚實現方式，哪麼不看注釋也是可以看懂代碼。）

查看DEMO：純CSS聊天泡泡

純CSS聊天泡泡
只需要簡單的HTML代碼： <div>Content</div> 或 <p>Content</p> 就可以做出以下的聊天泡泡效果：如果再添加一個子項目，例如 <blockquote>Quote</blockquote> 再可以做出這樣的聊天泡泡效果：我建議您使用偽類 :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:"0a0";
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本文中的技術沒有更好的支援方案。