分类目录归档:标准研究

W3C相关标准

HTML 5研究(1):离线Web应用程序

(注:本文前半部分翻译自W3C上的Offline Web Applications文档)

HTML 5包含了几个新特性,致力于解决构建能够离线运行的web应用程序。这些特性包括SQL、离线应用缓存API、在线/离线事件和状态,以及本地存储API。

1. 简介

典型的在线Web应用程序只能在有Internet连接的时候使用。没有网络时,人们不再能够检查他们的电子邮件、浏览他们的日程表,也不能用在线工具准备发言。原生应用程序则具有这些特性:e-mail客户端在本地存储邮件,日历应用在本地存储安排,演示软件在本地存储数据文件。

此外,离线时,用户完全依赖于HTTP缓存,因为他们不能连接到服务器获取最新的拷贝。

针对这个问题,HTML 5提供了两种解决方案:基于SQL的数据库API本地存储数据,和离线应用HTTP缓存来保证无法连接到网络时也能使用应用程序。

2. SQL

HTML 5的客户端SQL数据库可以实现结构化的数据存储,如e-mail应用程序可以用来本地存储邮件。数据库API是异步的,保证用户界面不会被锁定。因为数据库交互可能横跨多个浏览器窗口,所以数据库API也支持事务(Transaction)。

您可以使用Window对象的openDatabase()方法创建数据库对象,该方法带四个参数:数据库名、数据库版本、显示名称和一个估计的大小(以字节为单位)。比如:

var db = openDatabase("notes", "", "The Example Notes App!", 1048576);

现在可以在该数据库上使用transaction()方法,transaction方法带1到3个参数:一个事务回调、一个出错时回调和一个成功时回调。transaction回调传人一个SQL事务对象,可以使用其executeSQL()方法。executeSQL()方法带1到4个参数:SQL语句、参数、SQL语句回调和SQL语句出错回调。SQL语句回调传出事务对象和SQL语句结果对象,可以用来获得数据行、最后插入的ID等等。

要完成记事本应用程序,需要添加如下代码:

function renderNote(row) {
  // renders the note somewhere
}
function reportError(source, message) {
  // report error
}
function renderNotes() {
  db.transaction(function(tx) {
    tx.executeSql('CREATE TABLE IF NOT EXISTS Notes(title TEXT, body TEXT)', 
      []);
    tx.executeSql(‘SELECT * FROM Notes’, [], function(tx, rs) {
      for(var i = 0; i < rs.rows.length; i++) {
        renderNote(rs.rows[i]);
      }
    });
  });
}
function insertNote(title, text) {
  db.transaction(function(tx) {
    tx.executeSql('INSERT INTO Notes VALUES(?, ?)', [ title, text ],
      function(tx, rs) {
        // …
      },
      function(tx, error) {
        reportError('sql', error.message);
      });
  });
}

3.离线应用缓存API

保证用户在没有联网的时候仍能使用Web应用程序的机制就是html元素的manifest属性。该属性包含一个清单(manifest)的URI,清单指定了哪些文件将缓存。清单有一个text/cache-manifest MIME类型。一个典型的清单文件如下:

CACHE MANIFEST
index 
help 
style/default.css
images/logo.png
images/backgound.png
NETWORK:
server.cgi

该文件指定缓存若干文件,也指定了server.cgi不应该缓存,访问该文件将绕过缓存系统。

清单可以像如下在HTML中声明:

<!DOCTYPE HTML>
<html manifest="cache-manifest">
...

server.cgi文件列入白名单(放在NETWORK部分),因此可以连接服务器获取更新,如下:

<event-source src="server.cgi">

(event-source元素是HTML 5新引入的,允许服务器推送更新到Web页面。)

CSS相关细节

最近在跟踪CSS处理相关的BUG,发现CSS很多细节还不清楚,参阅了https://www.w3school.com.cn,了解了一些之前都未接触过的CSS用法,特记录下来,供今后参阅。

CSS 单位

尺寸

单位描述
%百分比
in英寸
cm厘米
mm毫米
em

1em 等于当前的字体尺寸。

2em 等于当前字体尺寸的两倍。

例如,如果某元素以 12pt 显示,那么 2em 是24pt。

在 CSS 中,em 是非常有用的单位,因为它可以自动适应用户所使用的字体。

ex一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。)
pt磅 (1 pt 等于 1/72 英寸)
pc12 点活字 (1 pc 等于 12 点)
px像素 (计算机屏幕上的一个点)
其中ex是一个非常令人迷惑的单位,看看W3C的CSS 2.1是如何说的:

The ‘ex’ unit is defined by the element’s first available font. The exception is when ‘ex’ occurs in the value of the ‘font-size’ property, in which case it refers to the ‘ex’ of the parent element.

The ‘x-height’ is so called because it is often equal to the height of the lowercase “x”. However, an ‘ex’ is defined even for fonts that do not contain an “x”.

The x-height of a font can be found in different ways. Some fonts contain reliable metrics for the x-height. If reliable font metrics are not available, UAs may determine the x-height from the height of a lowercase glyph. One possible heuristic is to look at how far the glyph for the lowercase “o” extends below the baseline, and subtract that value from the top of its bounding box. In the cases where it is impossible or impractical to determine the x-height, a value of 0.5em should be used.

简单说来,就是等于小写字母”x”的高度,更简单的处理是1ex=0.5em.

颜色

单位描述
(颜色名)颜色名称 (比如 red)
rgb(x,x,x)RGB 值 (比如 rgb(255,0,0))
rgb(x%, x%, x%)RGB 百分比值 (比如 rgb(100%,0%,0%))
#rrggbb十六进制数 (比如 #ff0000)