随笔分类 -  Designing With Web Standards

摘要：1. 大多数浏览器已经支持DOM1规范，虽然他们可能采取不同的实现方式。2. 优雅脚本：把行为从Web开发的结构和表现中分开来，它涉及用于增强一个已经是基于语义和可访问性的标记结构，并能够在用户或者设备不支持Javascript的情况下提供可靠的服务。 a. 易用性获益：一个应用优雅DOM脚本方法构建的页面不会打扰用户；——只是网站的附加功能 b. 功能精简的获益：优雅DOM脚本不会在它出错的时候引发访问用户的烦恼；——先测试浏览器是否支持要使用的对象 c. 可访问性获益：页面的最基本功能不会依赖于优雅DOM脚本；——如果脚本无法运行，页面还仍通过标记、样式与或者和服务器脚本技术来继续展... 阅读全文

摘要：1. 可访问性与CSS布局以及语义XHTML有共同之处，它们都是为了保证我们的网站拥有更多的用户，使他们更容易访问网站。2. 几乎所有的可访问性辅助功能对可视化设计都没有影响。因为他们只存在标记中，存在于网站外观下面。网站可以既美观又具有很高的可访问性。3. 关于可访问性的一点技巧 a. 图片alt 缺少alt属性图片的文档被标记成WAI访问错误或标记为XHTML校验错误。必须给img元素添加alt属性来描述用途，html 5中figure的figcaption可替代alt，但不能把alt设为空串，不然屏幕阅读器会认为图片只是装饰作用； W3C清楚解释了alt文本只有当不显示图片... 阅读全文

摘要：1. px px在各个平台的大小基本一致，但是IE<=6/Win不支持页面缩放功能，由于现代浏览器对页面缩放功能的支持，完全可用px；2. em W3C标准尺寸是：16px/96ppi,由于一般情况下，用户不会调整浏览器默认字体大小，所以可以用em。由于IE/Win的统治地位，62.5%解决方案使得IE/Win浏览器默认16px下字体过大的缺陷，而且用户还能通过设置默认字体大小进行文字大小控制； em行高和不带单位的行高（和%一样）在继承上差异很大；（em会以计算出的像素继承，不带行高的数值直接继承）3. 字体关键字法 xx-small、x-small、small、medium、lar. 阅读全文

摘要：1. 盒模型： content box、padding box、border box、margin box. 标准盒模型的宽度是content box的宽度。但IE<6/Win和IE<5/Mac的浏览器错误理解盒模型，把盒宽度认为是border box的宽度。——Tantek Celik的盒模型Hack方法能解决；2. IE<=6/Win的大小尺寸bug大多都是内含float元素造成，解决方法是设置{height：1%；}触发hasLayout。 阅读全文

摘要：不错的相关文章：http://hi.baidu.com/flondon/item/4da1a01c3885967f7b5f25981. html 4.01，xhtml 1.0框架式和过渡式DOCTYPE都将触发浏览器（IE6,7除外）的近乎标准模式；html 4.01，xhtml严格式DOCTYPE和html5 DOCTYPE都将触发标准模式；HTML 4.0DOCTYPE和不声明DOCTYPE都将触发混杂模式； IE6/Win遇到XML prolog（XHTML）会出现异常，会返回混杂（Quirk）模式； 混杂模式：浏览器会已不兼容标准的模式来解析页面（IE/Win会以IE5.5解析）；.. 阅读全文

摘要：1. diaplay: none W3C:This value causes an element to generate no boxes in the formatting structure (i.e., the element has no effect on layout). Descendant elements do not generate any boxes either; this behavior cannot be overridden by setting the ‘display’ property on the descendants. visibility:.. 阅读全文

摘要：1. CSS概述：一种对Web文档添加样式的简单机制 a. CSS是Web标准化布局语言，它可以控制颜色、版式设计、以及元素、图像的尺寸和布局； b. 虽然CSS精确并且功能强大，但是对于手工书写来说还是比较简单的； c. CSS的适用性：仅仅一个CSS文件就能控制包含上千个页面和几百兆字节的整个站点的外观； d. 其创建者（W3C）的意图是以CSS取代HTML表格式布局、框架和其他外观程式。对于混合过渡方式布局，CSS也是相当高效的； e. 纯CSS布局和结构式XHTML相结合能帮助设计师从结构中分离出来，使站点的访问及维护更加容易。2. “最合适方案”设计方法 a. 先在可靠的... 阅读全文

摘要：1. 目标：制作一个混合的、过渡的布局，结合使用具有结构化的文本标记和增强型可访问性的传统表格布局技术。 a. 用CSS来控制颜色、尺寸和元素的相关位置； b. 用XHTML文本和CSS来实现菜单图片的交替效果，用CSS来代替Javascript能节省带宽，增加可访问性；2. 基本方法 a. 分割表格：将版面分成两个表格能允许我们更好的运用id属性——简化CSS、增强可访问性和对每个表格做出结构性标记（id）； b. 表格摘要属性summary：对于普通桌面浏览器不可见，但对于屏幕浏览器可以大声读出它的数值，增强可访问性； c. 跳过导航：跳过导航可以让使用屏幕阅读器的用户带来益处；... 阅读全文

摘要：1. div和span div和span元素，再加上id和class属性，提供了一个把结构添加到文档的通用机制； div是一个“一个增加结构的通用机制”； id和class的定义应该是有意义或元结构的名字，如果你养成习惯给一些页面核心组件命名，你就会抛弃从页面表现层进行思考和开发的习惯了； 一个id值必须以一个字母或者下划线开头，它不能以一个数字开头。W3C的校验服务可能不会捕获这个错误，而一些XML处理器可以。由于一些老CSS2.0实现中的限制，在class和id中使用下划线也不是好主意； div配合有意义的id和class可以提供语义信息。2. 混合布局和简洁的标记 使用表格并... 阅读全文

摘要：1. 用正确的文档类型和命名空间 XHTML允许设计师或开发者创造个性化的、不同类型的文档，每种文档被不同的规则约束。这些规则都在一个叫文档类型定义（DTD）的XHTML规范的基础上定义的。DOCTYPE声明校验服务，现代浏览器根据你定义的DTD来描述你的标记。在转换过程中，这些信息告诉那些校验服务和浏览器如何操作页面。 DOCTYPE声明的是一个兼容标准的网页的关键组成部分，如果DOCTYPE声明不正确，标记和CSS都不会生效。 Note：浏览器并不进行严格的DTD检验，如果需严格用XHTML则应发送MIME：aplication/xhtml+xml。 过渡型或框架型HTML 4.0... 阅读全文

摘要：1. XHTML XHTML是一个用XML语法对HTML重新阐述的语言，是一种用XML定制的语言。XHTML是一个基于XML的标记语言，并且看起来和HTML有些相像，只有一些小的但很重要的区别。 XHTML的一致性能避免一些浏览器问题，更重要的是基于XML的语言开发页面能很好地和其他基于XML的语言、应用程序和协议进行交互。2. XHTML版本 XHTML 1.0，主要是规范了HTML，XHTML 1.0过渡型兼容HTML；XHTML 1.1 与1.0不兼容，并且使用了一个MIME类型会引起一些浏览器进行错误处理；XHTML 2.0准备向语义化靠的更近，故意设计成不向前兼容于HTML和X... 阅读全文

摘要：1. XML 和 HTML a. XML和HTML来源于同样的技术SGML，XML是HTML的提升，目标是替代HTML； b. HTML是构架Web页面的一种基本语言，但Web的规则很松散（如标记是否关闭不影响），这使人们创建Web页面变得容易。而现在网站经常需要频繁通过发布工具重组页面，经常需要将内容从数据库发布到Web页面或者无线设备，HTML松散的规则阻碍了数据的转化； c. HTML仅仅是一种格式化语言，而不是一个能确切描述自己的语言，语义化不高，因此限制了我们重用这些内容的能力； d. 基于XML的标记，则由一些统一的规则组成并且具备超越Web领域的能力。当用XML创建一个文... 阅读全文

摘要：1. 理解 vs 真实 对于可访问性，许多设计师错误认为Web标准与友好的图形界面设计需求相矛盾。建立标准的人却不在商业应用中推广标准。实际上，现在主流浏览器都已经开始遵循标准了。2. IE5/Mac——DOCTYPE转换和放大 IE5/Mac（2000.3）支持XHTML，ECMAScript，几乎所有的CSS1规范和大部分CSS2规范，以及大部分DOM规范，同时还能显示未处理的XML。 IE5/Mac与标准结合的非常紧密，只要简单放置正确的DOCTYPE转换，页面就能用Web标准来显示和执行。不放置就按照原有模式（即混杂模式 IE/Win中是IE 5.5）显示和执行； IE5/Ma... 阅读全文

摘要：1. Web标准三剑客 a. 结构：一个标记语言（XHTML），包含格式化的文本数据，包括：标题、副标题、段落、数字列表、定义列表等等； 页面被校验通过，意思是它包含的代码没有错误，校验可以通过在线免费软件进行；代码是符合语义，意思是标签和他们要表达的含义是相近和一致的；我们说的符合Web标准的设计是指既要通过校验又有语义的网页； XHTML1.0要求更严格：很多以前不够严谨的HTML标记，在XHTML中都变成了不能接受的，不能通过页面校验，但是浏览器虽然理解XHTML标记，但却不会严格地按照标准执行错误检查，这就意味着页面仍然可以不遵守XHTML规则； XHTML 2这个新版... 阅读全文

摘要：1. 现代浏览器和Web标准 现代或者符合标准浏览器：浏览器能够理解和支持HTML和XHTML，CSS，ECMAScript以及DOM标准； 符合标准的浏览器有：Firefox 1.5+以及Netscape Navigator 8、IE6+、Mac OS下的Safari 2.0+、Opera 8.5+等；（主要5大呈现引擎：IE、Gecko、Webkit、KHTML、Opera） 没有完美支持标准的浏览器，符合标准的设计和开发并不是说“只为最新的浏览器版本设计”；（IE5/MAC曾经是支持标准的先锋） 2. 向前兼容和向后兼容 a. 向前兼容：使用非标准的、私有的标记和代码来保证每一... 阅读全文