形似 iMessage 气泡界面的 CSS，帮助人们将有价值的观点对话快速地在 Web 上呈现，让访问者更充分地体会讨论的过程。
我後來想了一下，工業設計上，蘋果基本沒有產品是為了讓你用得舒服方便設計的。他們是要設計出 object of desire，然後讓你好好呵護它們的酥胸。
部件与结构
在 Web 页面上呈现对话，应准确传达内容且不失气氛。这些部件和结构，利用图形隐喻，帮助你创建一个可达成上述目标的对话环境。
1. 气泡
文字、图片、图文等讯息的容器。右对齐的气泡为我方发出的讯息，通常为蓝色；左对齐的气泡则是对方发来的讯息，通常为浅灰色，这使得收到的讯息更为清晰、准确、无修饰。同一方连续发送的不被打断的多条讯息，间隔不超过 60 秒的每两条，前一条不带气泡小尾巴。
2. Emoji
以大型字号显示 emoji 表情符号，传达无须文字描述的情绪。一条 emoji 讯息最多包含 3 个，若超过则请以气泡为载体来显示。
3. 时间戳
居中显示的时间标记。按标准格式标明日期、星期和时间，可继续调用类以添加状态描述，如 John 完成了一项体能训练。
等描述事件状态的内容。
4. 间距
同一方连续发出的讯息，若每两条间隔小于 1 分钟，则间距窄；反之，则间距宽。非同一方发送的连续两条讯息，间距宽。
5. 渐变
我方发出的蓝色气泡，背景色纵向渐变。较久前发出的讯息呈浅蓝色，最近发出的则呈蓝色。滑动页面，同一气泡的颜色会随时间远近而产生相应的渐变。讯息会随着时间被冲淡，受关注度减弱，而对比度强烈的最近讯息则更为明晰。渐变在 iOS 上可能不工作。
6. 宽度
Web 页面可能由于多种因素而以不同宽度显示。聊天介面的宽度会影响阅读体验，过宽的介面会降低信息传递效率，甚至让它看起来不像一个聊天介面，确保整个聊天区块的宽度不超过 680 像素。各方讯息的宽度不会超过聊天区块宽度的 70%，这使得每条讯息的来源都符合直觉，易于理解。
部署到 Web
当前 SDK 最新版本为 1.0.0
1. 嵌入 CSS 样式表
在 HTML 的 <head> 标签内引入 CSS 样式表，确保符合 W3C 规范。
<link rel="stylesheet" type="text/css" href="https://www.lujiawei.com/openkit/web/msgsk/1/messages.css">CSS 样式表的版本号在 URL 中体现。例如，数字 1 代表主版本号为 1 的 SDK。主版本号相同的子版本在 class 上互相兼容。
2. 尽可能优化引入
嵌入的 CSS 样式表被托管在全球 21 个国家和地区的内容分发网络（CDN）上，能在瞬间被加载以供浏览器渲染。尽管如此，仅在需要调用的页面引入 CSS 样式表，始终是更明智的做法。这样不仅令你的代码更简洁，也节约资源，还能让用户获得更愉快的体验。
3. 声明 HTML
在已经引入 CSS 样式表的页面上，简单地添加可调用的类到 HTML 元素内（请尽可能仅使用 div p a img 元素）。它看起来应当如此：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://www.lujiawei.com/openkit/web/msgsk/1/messages.css">
</head>
<body>
<div class="chat">
<div class="...">...</div>
<div class="...">...</div>
</div>
</body>
</html>可调用的类
在图形化列表浏览并挑选可用的类，再在 HTML 中声明，即可在 Web 页面呈现。
.chat
聊天区块。
.bluemsg
右对齐的蓝色气泡（无小尾巴）。
天地玄黄宇宙洪荒日月盈仄
.bluemsg-last
右对齐的蓝色气泡。
Glib jocks quiz nymph to vex dwarf.
.greymsg
左对齐的浅灰色气泡（无小尾巴）。
汉体书写信息技术标准相容
.greymsg-last
左对齐的浅灰色气泡。
大凡筆法，點畫八體，備於永
字。
.pic-sent
右对齐的图片气泡（无小尾巴）。
.pic-sent-info
右对齐的图文气泡（无小尾巴）。
壹貳參肆伍陸柒捌玖拾一二三四五六七八九十卄卅ㄅㄆㄇㄈㄉㄊㄋㄌㄍㄎㄏㄐㄑㄒㄓㄔㄕㄖㄗㄘㄙㄚㄛㄜㄝㄞㄟㄠㄡㄢㄣㄤㄥㄦㄧㄨㄩ兙兛兞兝兡兣嗧瓩糎
.pic-sent-info-last
右对齐的图文气泡。
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
.pic-received
左对齐的图片气泡（无小尾巴）。
.pic-received-info
左对齐的图文气泡（无小尾巴）。
天地玄黄，宇宙洪荒。日月盈昃，辰宿列张。寒来暑往，秋收冬藏。闰余成岁，律吕调阳。
.pic-received-info-last
左对齐的图文气泡。
Cozy lummox gives smart squid who asks for job pen.
.emoji-sent
右对齐的 emoji 表情符号。
.emoji-received
左对齐的 emoji 表情符号。
.sparetime
间隔。
.clear
（可清除浮动元素。）
.timestamp
居中的时间戳。
1. 对话内容均包含在
.chat 的元素内，类可集中控制对话内容的部分属性。2. 如果类要包含图片，请在元素内插入
<img /> 标签来链接图片。3.
.sparetime 仅与 emoji 表情符号类配合使用。时间间隔达 60 秒的两条 emoji 表情符号讯息之间，以及后方紧接另一方讯息的 emoji 表情符号，设置间隔。其他类只要符合 [class$="-last"] 则元素自带间隔。4. 使用时间戳之前，必须清除浮动元素。因此
.timestamp 的元素必须紧邻在 .clear 的元素后方。微调类的样式
可调用的类在未定义的属性上以继承的属性值呈现，可能导致气泡的最终状态和预期相比有所出入。将 CSS 规则添加至你的样式表，并根据实际情况微调至最佳状态。
1. 文字大小可能影响气泡的高度，从而影响小尾巴与气泡主体的衔接。根据实际情况微调气泡小尾巴的高度。
[class$="-last"]:before {
height: 23px
}2. 若气泡周围的页面背景非白色，则需调整气泡小尾巴的一部分，让其色彩与背景色保持一致。
[class$="-last"]:after {
background: #fff
}