HYXT Blog

we produce valuable software for K12.
clock November 24, 2008 12:12 by author Sky Jia (贾超)

by Nik Cubrilovic on May 29, 2008


The next-gen web is starting to gather pace, as this week 
MySpace integrated Google Gears, Yahoo! announced their new BrowserPlus product and Google launched a browser-based edition of their 3D Earth product. Technologies and formats such as AIR,SilverlightJavaFXGearsXULWeb Applications 1.0 (DOM5, HTML5 etc.) allow developers to accelerate beyond AJAX and towards a new generation of web applications with better performance, more functionality and tighter desktop integration.

Developers and users are now presented with more web technology choice then ever before; "DLL hell" has been superseded by "plug-in hell", as a variety of companies present their versions of what the next-gen web will look like. But on the web, such choice can come at a cost to both users and developers. More than a decade has passed since the first battle over web formats, back then it was Microsoft, Netscape, Apple, AOL and others laying different foundations in the form of browsers, scripting languages, web servers and more. The legacy of that battle is still being felt today, as Javascript developers rely on whole libraries to assist them in developing cross-browser code and CSS developers depend on a catalog of hacks so that their sites can look consistent across different browsers.

With the new rich web application technologies still in the development phase, there is an opportunity to not repeat the mistakes of the past and instead take a standards-based approach. Thankfully during the course of the previous decade companies such as Microsoft became more receptive to open standards, data portability and cross-platform support. Having broad support for open standards simplifies technology for both users and developers, but it is obvious that not all of the currently announced technologies, such as those listed above, will

During the course of a series of posts here on Techcrunch we will look at various elements that make up the next-gen web and evaluate the options available, current support as well as how well standards are being adopted. In light of the recent announcement from MySpace that they are using Google Gears in their application, in this first post we will evaluate browser-based local storage cache's.

Browser-based Local Storage

As web applications became more popular there was a general demand for an ability to run web-based applications offline. The first such solutions that could work without requiring a browser plugin or separate application were those that relied on the caching headers within HTTP to store objects within the browsers cache. Javascript libraries such as Dojo implemented support for offline web applications using the same principals, but applications were very limited in scope as there was no easy way to store structured data on the browser (Dojo now also abstracts a variety of other storage engines including Gears- tip: Dylan) .

In May of 2007, Google launched Google Gears, a browser plugin that allows web applications to synchronize data into a local data store and then allow web applications to function offline. At the launch of Gears, Google Reader was adapted to support it, and the emphasis of the pitch for Gears was about offline application access. What was less known is that Gears is a lot more than just offline access, as it provides three primary functions:

  • Caching of resources (HTML pages, images etc.)
  • Structured data storage in a database
  • Asynchronous background worker threads

The part of this we will focus on here is the local object and structured data storage. Gears provides these functions via a Javascript API, which can be accessed by any web application. The structured storage is provided by Sqlite, a popular lightweight RDBMS. With the local database, the developer can not only perform queries and inserts to record new data, but also more complex SQL like joining between tables etc. Although you can have multiple applications using Gears, each app runs in a sanboxed environment with a domain-based security model (similar to cookies and Ajax requests). Sqlite has been built into Firefox since version 2.0, but its API is only accessible from an add-on or a core Firefox component. The Gears plugin bridges that gap and makes it available within the client scripting environment.

Before Gears was launched, the Web Hypertext Application Technology Workgroup(WHATWG) had begun work on its Web Applications 1.0 draft spec, which included structured data storage as part of HTML5. The current draft spec from the working group includes definitions for a Database object for accessing and querying a local data store. The details of the implementation are left up to the vendor, but the API is detailed in the spec. Firefox will be implementing parts of the same storage API from the WHATW spec in version 3.0 of the browser, which is currently available as a preview release. The key components of the WHATWG spec are:

  • ApplicationCache - for storing objects in the local browser cache (and checking them)
  • navigator.onLine - check if the browser is online or not (and use cache plus local data store if required)
  • Storage interface and events - used for storing name and value pairs via thesessionStorage DOM attribute.
  • Database interface - used for connecting to the local database. Supports SQL (or a subset thereof, depending on the server used), versioning, error events via callback
  • Threading and Callbacks - so that multiple requests can be sent to the local data store asynchronously.

Implementing local storage, caching and offline access are relatively easy. The application can first check to see if these functions are supported, and then setup the local cache by synchronizing the users data in background processes. While a thread is running, either uploading or downloading, you can query it to check on its status to provide the user with feedback (eg. a progress bar). Once the data is local, by running database queries on the local machine developers are able to drastically improve performance. Currently many web applications use the browser as only a presentation layer, for eg. a spreadsheet application may do a round-trip back to the server to work out even elementary calculations such as=1+1. By utilizing the local data store and client-side code, the developer is able to offload processing and storage to the client and provide a much smoother, desktop-like experience at the same time.

Current And Future Support

The issue is that the majority of the WHATW specification was written after Gears was released, so the Database and LocalServer objects used in Gears are not compatible with WHATW - for now. The good news is that Google have come out and fully backed the storage portions of the WHATWG HTML5 spec, so developers with apps running on Firefox 3 with Gears installed will have a choice to use either the native implementation, or the Google implementation. Google go on to say that they will likely offer extra features as an incentive for developers to continue to target Gears over-and-above the HTML5 implementation (features such as desktop shortcuts, etc.).

Other alternatives for local data storage, such as Flash local storage, are completely incompatible with the WHATW specification. The developers at WebKit were very quick to announce that they have started implementing the storage portions of the HTML5 spec also. It is currently available in nightly builds, so in the near future we will see support in both Konquror and Safari. Opera have also announced similar plans and they are actually leading everybody when it comes to implementing HTML5 and Web Forms. Yahoo! BrowserPlus was only announced yesterday, and it is currently unclear wether their local storage support is compatible with the specification as laid out by the working group.

Local storage is a major new feature of the new web API, and developers will not only have consistent support across browsers but will also have the option of Google Gears (which is already available) as well as Yahoo! BrowserPlus (depending on how it works). There is just one browser maker missing in this discussion so far and that is Microsoft. Microsoft have released an early preview of IE8 and announced a raft of new features, a lot of which are based on open standards such as better CSS and Javascript support (with a more standardized object model). The big question is wether we will see consistent local storage support from IE8 following the same spec as the other browser vendors. The IE team have announced that IE8 will support DOM Storage, but that is only part of the overall local storage spec (ie the Storage object described above only).

Overview of Current And Future Support

  

Gears

BrowserPlus

Firefox

IE8

Webkit

ApplicationCache

soon

detect onLine

LocalServer

Storage

Database

Threading

SQL

Notes: Once details of BrowserPlus are known the table will be filled in. Gears has pledged to adapt the standard. IE8 has only announced partial support. WebKit have most functionality available in their nightly builds. Both Flash and Silverlight have some form of local storage but not the HTML5 standard API.

It is very rare that a new technology such as local browser storage is so broadly advocated and supported mostly under a single spec. While Microsoft may not have yet announced full support, there is no doubt that they are heading in the right direction. It is also encouraging that implementations from Google Gears and Firefox 3 will follow the working group spec for HTML5. While the new versions of these browsers will not be available broadly for a while longer, Google Gears is available today and since all vendors are targeting the same API, developers can today confidently target and write for the Gears storage API with confidence - something that was almost impossible to do not so long ago.

So with local browser storage and caching, so far the open standard is the winner. The alternate solutions are likely to fall by the wayside or will adapt to implementing the same API.


clock November 19, 2008 10:42 by author ethan

原文链接:http://www.javaeye.com/topic/241260 

 

在看js代码时,有时会看到关于quirks mode(怪异模式)和strict mode(严格格式)的东西,一直也没深究怎么回事,只是零零碎碎的有些概念,最近终于受不了这种似懂非懂的感觉,决定好好学习总结一下。

1、quirks mode和strict mode是浏览器解析css的两种模式,或者可以称之为解析方法。目前正在使用的浏览器这两种模式都支持 。

2、历史原因。

当早期的浏览器Netscape 4和Explorer 4对css进行解析时,并未遵守W3C标准,这时的解析方式就被我们称之为quirks mode(怪异模式),但随着W3C的标准越来越重要,众多的浏览器开始依照W3C标准解析CSS,仿照W3C标准解析CSS的模式我们叫做strict mode(严格模式).


3、后来的浏览器虽然支持strict mode,但众多浏览器并未放弃支持quirks mode。

一个重要的原因就是为了之前大量在quirks mode下开发的网页能够得到正确的显示。所以,这些支持两种模式的浏览器当拿到一张网页时,所做的一个前期工作就是判断采取何种方式进行解析(判断条件后面会说)。注:Explorer 5仍然只支持quirks mode



4、浏览器如何判断何用哪种方式解析CSS?

解决方案就是采用doctype声明,大多数浏览器采用下面的这些判断规则

  •     浏览器要使老旧的网页正常工作,但这部分网页是没有doctype声明的,所以浏览器对没有doctype声明的网页采用quirks mode解析。
  •     对于拥有doctype声明的网页,什么浏览器采用何种模式解析,这里有一张详细列表可参考:http://hsivonen.iki.fi/doctype/
  •     对于拥有doctype声明的网页,这里有几条简单的规则可用于判断:

对于那些浏览器不能识别的doctype声明,浏览器采用strict mode解析

 

在doctype声明中,没有使用DTD声明或者使用HTML4以下(不包括HTML4)的DTD声明时,基本所有的浏览器都是使用quirks mode呈现,其他的则使用strict mode解析。


可以这么说,在现有有doctype声明的网页,绝大多数是采用strict mode进行解析的。


在ie6中,如果在doctype声明前有一个xml声明(比如:<?xml version="1.0" encoding="iso-8859-1"?>),则采用quirks mode解析。这条规则在ie7中已经移除了。


5、mozilla提出了almost strict moede ,和strict mode的区别是:

img元素在strict中是inline的,而在almost strict mode中是block的。其实我们前面所说,在大多数浏览器,大多数doctype声明触发的是almost strict mode;


6、quirks mode和strict mode最大的不同就是提现在对盒模式的解释上 ,这也是我们在js里要注意的地方。


什么是盒模式? 这是针对块级元素说的,我这里只简单说一下(详情请查阅相关资料)。说白了就是把块级元素想像成一个装东西的盒子,而margin,padding,border,width这些css属性构成了盒模式。

 

而区别就是产生在width属性上:


strict mode中 :

width是内容宽度 ,也就是说,元素真正的宽度 = margin-left  +  border-left-width  +  padding-left  + width  +  padding-right  +  border-right-width  +  margin-right;

 

quirks mode中 :

width则是元素的实际宽度 ,内容宽度 = width  -  (margin-left  +  margin-right  +  padding-left  +  padding-right  +  border-left-width  +  border-right-width)


这里把盒模式相关的东西记录一下,备忘 !


·内联元素 ,例如<a>、<span>等,定义上下边界不会影响到行高(line-height),内联元素距离上一行元素的距离由行高决定,而不是填充或边界。 注2.  内联元素(display: inline) 内联元素不需要在新行内显示,而且也不强迫其后的元素换行,如a、em、span等都为内联元素。内联元素可以为任何其他元素的子元素。

·浮动元素(无论左或者右浮动)边界不压缩 ,且若浮动元素不声明宽度,则其宽度趋向于0,即压缩到其内容能承受的最小宽度。 

·如果盒中没有内容,则即使定义了宽度和高度都为100%,实际上只占0% ,因此不会被显示,此点在采取层布局的时候需特别注意。 

·边界值可为负,其显示效果各浏览器可能不相同 。 

·填充值不可为负 。 

·边框默认的样式(border-style)为不显示(none) 。


7、在quirks mode 和 strict mode中还有一个区别 ,但没经过验证,我只是发现有这个现象。

strict mode 中,

table的css属性font-size会继承父级元素的 ,也就是说,table中的字体大小会继承父级元素字体的大小。

quirks mode 中,

table的css属性font-size不会继承父级元素的 ,需要专门设置一下。也就是说,table中的字体大小不会继承父级元素字体的大小。


8、在js中如何判断当前浏览器正在以何种方式解析? 
    document对象有个属性compatMode ,它有两个值:
        BackCompat    对应quirks mode
        CSS1Compat    对应strict mode

9、我们在编写跨浏览器兼容性的js代码时,常用到的判断代码(来源于ext) :

Js代码 复制代码
  1. var ua = navigator.userAgent.toLowerCase();  
  2.        var client = {  
  3.        isStrict:   document.compatMode == 'CSS1Compat',  
  4.        isOpera:    ua.indexOf('opera') > -1,  
  5.        isIE:       ua.indexOf('msie') > -1,  
  6.        isIE7:      ua.indexOf('msie 7') > -1,  
  7.        isSafari:   /webkit|khtml/.test(ua),  
  8.        isWindows:  ua.indexOf('windows') != -1 || ua.indexOf('win32') != -1,  
  9.        isMac:      ua.indexOf('macintosh') != -1 || ua.indexOf('mac os x') != -1,  
  10.        isLinux:    ua.indexOf('linux') != -1  
  11.        };  
  12.        client.isBorderBox = client.isIE && !client.isStrict;  
  13.        client.isSafari3 = client.isSafari && !!(document.evaluate);  
  14.        client.isGecko = ua.indexOf('gecko') != -1 && !client.isSafari;  
  15.   
  16.        /** 
  17.         * You're not sill using IE6 are you? 
  18.         */  
  19.        var ltIE7 = client.isIE && !client.isIE7;  
 


10、废话 :我不知道现在的很多js框架为什么还对解析模式进行了判断。我认为这些框架肯定是给现在要开发的项目使用的,那应该都是strict mode才对呀?是不是因为还有很多人不习惯给页面加上doctype声明呢?

 

其它相关文章连接:

1. http://www.cnblogs.com/justinyoung/articles/900776.html  浏览器的模式问题 Quirks Mode vs Standards Mode

2. http://www.cnblogs.com/JustinYoung/articles/Quirks-mode.html  Quirks mode、Almost standards mode、Standards mode

 


Search

Calendar

<<  September 2010  >>
SuMoTuWeThFrSa
2930311234
567891011
12131415161718
19202122232425
262728293012
3456789

Categories

Tags