Category Archives: Frontend

通过user-Agent获取浏览器和操作系统信息

 下面是我整理的一些userAgent大家先看看格式 //Firefox 1.0.XMozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.6) Gecko/20050225 Firefox/1.0.1Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.8) Gecko/20050511 Firefox/1.0.4Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.10) Gecko/20050716 Firefox/1.0.6Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.12) Gecko/20050915 Firefox/1.0.7//Firefox 1.XMozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8) Gecko/20051111 Firefox/1.5Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8) Gecko/20060109 Firefox/1.5 (pigfoot) Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.8.0.1) Gecko/20060111 Firefox/1.5.0.1Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.2) Gecko/20060308 Firefox/1.5.0.2Mozilla/5.0 (Windows; U; […]

2011年最受欢迎的五款Web开发工具

虽然基于浏览器的操作系统还未“雄霸天下”，但对Web开发者来说2011年无疑是“风景不错”的一年。这是一个适合Web开发的“美好时代”，有很多有史以来最好的开发工具可供使用，下面我们将介绍五款2011年最受欢迎的Web开发工具： 1.jQuery和jQuery Mobile jQuery是一款免费且开放源代码的JavaScript代码库，而jQuery Mobile是jQuery在手机和平板上的版本。jQuery Mobile不仅能给主流移动平台带来jQuery核心库，还能发布一个完整统一的jQuery移动UI框架，支持全球主流的手机、平板、电子阅读器、台式电脑等平台。据微软关于jQuery的调查显示，jQuery在受访网站中的使用率已从2010年12月的27%上升到2011年12月的42%。 2.CSS3 PIE CSS3 PIE（“Progressive Internet Explorer”的缩写）工具可以让IE6至IE8的所有版本实现大多数的CSS3修饰特性，如圆角、阴影、渐变等等。通过这个工具，开发者可以在线修改想要的效果，并即时生成css代码。 3.Bootstrap 今年8月，Twitter推出了一个名为Bootstrap的开发工具包，将Web应用开发与部署变得更为简单快捷。Bootstrap包是一个简单的程序库，同时提供优雅的HTML和CSS规范。Bootstrap使用了一些最新的Web浏览器技术，向开发者提供时尚的排版、样式、按钮、表格、网格、导航等服务，而且占用资源很小，用gzip压缩后只有6K左右。 4.LESS LESS是一个CSS开发管理的强大工具，拓展了CSS的变量、运算符、include、嵌套规则等语法。LESS从Ruby的LESS library衍生而来，免费开源，实现了和CSS的无缝结合。此外，LESS可以配置成自动最小化所生成的CSS文件，不仅可以节省带宽，还可以改善最终用户的体验。 5.Chrome开发人员工具 火狐即将死亡的预言或许被夸大其词了，但可以肯定的是Chrome正在侵蚀越来越大的市场份额，其中最主要的一个原因是Web开发人员喜欢Chrome捆绑自带的开发人员工具。 Chrome开发人员工具主要基于WebKit网络检查器（开放源代码WebKit项目的一部分），可让Web开发人员随时随地对网页的CSS、HTML和JavaScript进行实时编辑、调试以及监控。该工具不仅能帮助诊断、修复在网页加载、脚本执行以及页面呈现中出现的问题，还可帮助最大限度地了解网页或网络应用程序对CPU以及内存的使用情况。 原文出处：ReadWriteWeb 译文出处：雷锋网

技术大牛谈HTML 5设计原理

Jeremy Keith在 Fronteers 2010 上的主题演讲 下载PPT(PDF) http://adactio.com/extras/slides/designofhtml5.pdf 观看视频 http://fronteers.nl/congres/2010/sessions/the-design-of-html5-jeremy-keith 今天我想跟大家谈一谈HTML 5的设计。主要分两个方面：一方面，当然了，就是HTML 5。我可以站在这儿只讲HTML 5，但我并不打算这样做，因为如果你想了解HTML 5的话，你可以Google，可以看书，甚至可以看规范。 实际上，确实有人会谈到规范的内容。史蒂夫·福克纳(Steve Faulkner)会讲HTML 5与可访问性。而保罗·艾里什(Paul Irish)则会讲HTML 5提供的各种API。因此，我今天站在这里，不会光讲一讲HTML 5就算完事了。 说老实话，在正式开始之前，我想先交待清楚我所说的HTML 5到底是什么意思。这话听起来有点搞笑：这会子你一直在说HTML 5，难道我们还不知道什么是HTML 5吗?大家知道，有一个规范，它的名字叫HTML 5。我所说的HTML 5，指的就是这个规范。但问题是，有些人所说的HTML 5，指的不仅仅是这个规范，还有别的意思。比如说，用HTML 5来代指CSS3就是一种常见的叫法。我可不是这样的。我所说的HTML 5，不包含CSS3，就是HTML 5。 类似的术语问题以前也有过。Ajax本来是一种含义明确的技术，但过了不久，它的含义就变成了“用JavaScript来做一切好玩的东西”。这就是Ajax，对不对?今天，HTML 5也面临同样的问题，它本来指的是一个特定的规范，但如今含义却成了“在Web上做一切好玩的事。”我说的不是这种HTML 5，不是这种涵盖了最近刚刚出现的各种新东东的HTML 5。我说的仅仅是规范本身：HTML 5。 刚才已经说了，我今天想要讲的内容不多，也没有打算介绍HTML 5都包含什么。今天我要讲的是它的另一方面，即HTML 5的设计。换句话说，我要讲的不是规范里都包含什么，而是规范里为什么会包含它们，以及在设计这个规范的时候，设计者们是怎么看待这些东西的。 设计原理 设计原理本质上是一种信念、一种想法、一个概念，是你行动的支柱。不管你是制定规范，还是制造一种有形的物品，或者编写软件，甚至发明编程语言。你都能找到背后的一个或者多个设计原理，多人协作的任何成果都是例证。不仅仅Web开发领域是这样。纵观人类历史，像国家和社会这样大规模的构建活动背后，同样也有设计原理。 就拿美国为例吧，美国的设计原理都写在了《独立宣言》中了。 我们认为这些真理是不言而喻的，人人生而平等，造物主赋予了每个人不可剥夺的权利，包括生存、自由和追求幸福。 这里有一句口号：生存、自由和追求幸福。这是被写进宪法中的核心理念，它关系到我们所有人的一切，也就是我们构建自己社会的原则。 还有一个例子，就是卡尔·马克思(Karl Marx)，他的著作在20世纪曾被奉为建设社会主义的圭臬。其基本思想大致可以归结为下面这条设计原理： 各尽所能，各取所需。 这其实就是一种经济体系背后的设计原理。 还有一个例子，比前面两个的历史更久远一些，不过大同小异： 人人为我，我为人人。 这个极为简单的设计原理，是两千年前的拿撒勒犹太人耶稣基督提出来的。而这条原则成为了后来许多宗教的核心教义。原理与实践有时候并不是同步的。 下面是小说中的一个例子。英国小说家乔治·奥威尔(George Orwell)笔下的《动物庄园》，就是在一条设计原理的基础上构建起来的虚拟社会。这条设计原理是： 四条腿的都是好人，两条腿的都是坏蛋! 《动物庄园》中有意思的是，随着社会的变迁——变得越来越坏，这条设计原理也跟着发生了改变，变成了“四条腿的都是好人，两条腿的就更好了。”最关键的是，即使是在虚构的作品里，设计原理都是存在的。 还有一套虚构的作品是以三条设计原理为基础构建起来的，那就是美国著名小说家艾萨克·阿西莫夫(Issac Asimov)的机器人经典系列。阿西莫夫发明了机器人学这个术语，并提出了机器人学三大法则，然后在这三个简单的设计原理基础上创作了一系列经典作品——大约有50本书。无论作品的情节如何变化，实际上都是从不同的角度来阐释这三大设计原理。我想，在座各位对机器人三大法则都不应该陌生。 机器人不得伤害人类，或袖手旁观人类受伤害。 机器人必须服从人类命令，除非命令违反第一法则。 机器人必须自卫，只要不违背第一和第二法则。 这些恐怕是第一次出现在小说中的针对软件的设计原理了。虽然基于这三个设计原理的软件运行在虚构的机器人的“正电子脑”中，但我想这应该是软件设计原理的事实开端。从此以后，我们才看到大量优秀软件背后的设计原理。 蒂姆·伯纳斯-李(Tim Berners-Lee)，Web的发明者，在W3C的网站上发表过一份文档，其中有一个URL给出了他自己的一套设计原理。这些设计原理并不那么容易理解，不仅多，而且随着时时间推移，他还会不断补充、修改和删除。不过我还是觉得把自己认同的设计原理写出来放在某个地方真是个不错的主意。 实际上，CSS的发明人之一伯特·波斯(Bert Bos)，也在W3C的网站上放着一份文档，其中讲的都是基本的设计原理，比如怎样设计并构建一种格式，无论是CSS还是其他格式。推荐大家看一看。 只要你在W3C的站点中随便找一找，就可以发现非常多的这种设计原理，包括蒂姆·伯纳斯-李个人的。当然，你还会看到他从软件工程学校里借用的一些口号：分权(decentalisation)、容忍(tolerance)、简易(simplicity)、模块化(modularity)。这些都是在他发明新格式的时候，头脑中无时无刻不在想的那些关键词。 在座各位对蒂姆·伯纳斯-李的贡献都是非常熟悉的，因为大家每天都在用。他发明了Web，与罗伯特·卡里奥(Robert Cailliau)共同发明了Web，而且在发明Web的同时，也发明了我们每天都在Web上使用的语言。当然，这门语言就是HTML：超文本标记语言。 HTML HTML最早是从2.0版开始的。从来就没有1.0版。如果有人告诉你说，他最早是从HTML 1.0开始使用HTML的，那他绝对是在忽悠你。从前确实有一个名叫HTML Tags的文档，其中的部分标签一直用到现在，但那个文档并非官方的规范。 使用标签、尖括号、p或h1，等等，并不是蒂姆·伯纳斯-李首创的想法。当时的SGML里就有了这些概念，而且当时的CERN(Conseil Europeen pour la Recherche Nucleaire，欧洲核子研究委员会)也在使用SGML的一个特定的版本。也就是说，即便在那个时代，他也没有白手起家;这一点在HTML后来的发展过程中也体现了出来：继往开来、承前启后，而不是另立门户、从头开始。 换句话说，这篇名为HTML Tags的文档可以算作HTML的第一个版本，但它却不是一个正式的版本。第一个正式版本，HTML 2.0，也不是出自W3C之手。HTML 2.0是由IETF，因特网工程任务组(Internet Engineering Task Force)制定的。在W3C成立之前，IETF已经发布了不少标准。但从第三个版本开始往后，W3C，万维网联盟(World Wide Web Consortium)开始接手，并负责后续版本的制定工作。 20世纪九十年代HTML有过几次快速的发展。众所周知，在那个时代要想构建网站，可是一项十分复杂的工程。浏览器大战曾令人头疼不已。市场竞争的结果就是各家浏览器里都塞满了各种专有的特性，都试图在专有特性上胜人一筹。当时的混乱程度不堪回首，HTML到底还重不重要，或者它作为Web格式的前景如何，谁都说不清楚。 […]

分享10个便利的HTML5/CSS3框架

 所有的开发人员都应该注意了，你们绝对应该看看这篇文章，帮助你快速创建HTML5/CSS3的开发框架。可能你也看到过其它的框架，但是你应该看看这些框架，因为你以前可能没用过他们中的大部分。看看最新的实用HTML5和CSS3框架吧！希望你们喜欢！ 1.HTML5boilerplate H5BP带给你非常漂亮的文档，一个网站优化的编译脚本，还有一个自定义的boilerplate编译器。除此之外，我们还支持lighttd，Google App Engine和NodeJS以及优化的服务器配置（包括Apache，Nginx，和IIS），并且已经把boilerplate的大小减少了50%。 源码 演示 2.The M project 跨平台的手机开发HTML5 javascript框架。特性包括：MVC HTML5，Javascript-所有的开发周期，离线支持（自动缓存），富客户端UI，本地和远程数据支持并且远程存储，国际化（i18n），开源（MIT license），基于NodeJS的编译工具（叫做Espresso）。 源码 演示 3.Gravity 一个基于SASS的框架用于创建功能强大的，易于管理的HTML5网站。能够帮助你快速的创建你创意的原型，并且能让你的开发更简单。 源码 演示 4.Popcorn.js 一个HTML5视频的事件框架，提供一个简单的API来同步互动和身临其境的内容。Popcorn.js使用本地本地HTMLMediaElement属性，方法和事件。转化成一个简单实用的API，并且提供了一个插件系统用于方便社区开发。 源码 演示 5.Roots 一个基于HTML5 boilerplate开发的wordpress主题，blueprint CSS（或者960.gs）和Starkers，能够帮助你快速在创建博客和文字站点。 源码 演示 6.Baker 2.0 一个HTML5 ebook框架用来在ipad和iphone上使用Web标准来发布内容。 源码 演示 7.CSS3-action-framework CSS3的类库用于收集最好的CSS3效果。现在支持CSS3的浏览器正在增加；CSS3在许多案例都可以像javascript一样使用，提供更好的用户体验 源码 演示 8.52frarmework 第一个用enavu network开发的HTML5/CSS3框架 源码 演示 9.G5 Framework 基于F布局。特性包括：CSS&SEO，PHP active class, HTML5 placeholder fallback,粘合的页脚，HTML5基线，光滑的滚动到顶端和非常干净的组织。 源码 演示 10.Inuit.CSS 由Harry Roberts创建。这个框架用于使用较少的代码实现稍小的屏幕。支持IE6+。 源码 演示 文章出自：gbin1.com

判断一个js对象是不是数组

  function isArray(o) {       return Object.prototype.toString.call(o) === '[object Array]';      }     判断更多特殊类型：  var is = {         types : ["Array","RegExp","Date","Number","String","Object","HTMLDocument"]     };     for(var i=0,c;c=is.types[i++];){         is[c] = (function(type){             return function(obj){                 return Object.prototype.toString.call(obj) == “[object "+type+"]“;             }         })(c);     }   

如何使用 CSS3 增强网站字体设计CSS, 字体网页设计, 字体WOFF字体属性字体嵌入

利用 Windows Internet Explorer 9 中新提供的对 层叠样式表 (CSS)，级别 3 (CSS3) 字体模块的支持，您可以将您的网站访问者的版式体验进行升级。 本主题演示如何将新的 CSS3 字体功能并入到您的网站中，以便在 Internet Explorer 9 和其他现代浏览器中突显您的字体设计。 版式是 Web 设计不可缺少的一部分，Internet Explorer 9 支持在 CSS 字体模块级别 3工作草案和 Web 开放字体格式 (WOFF) 1.0 工作草案中定义的高级版式功能。 这些功能包括以下各项： 通过使用 @font-face 规则改进的字体链接 新提供的对 Web 字体格式的支持： Web 开放式字体格式 (WOFF) 原始的可安装的 TrueType 和 OpenType（未设置嵌入权限） 具有新增的和更新的字体属性的高级版式功能： 新增的 font-stretch 属性 更新的 font-weight 和 font-size 属性，它们使其呈现行为在其他浏览器中更加一致。 另外，Internet Explorer 9 利用硬件加速的 Microsoft DirectWrite API 和子像素 Microsoft ClearType 字体定位（在 IE9 标准模式中），可比以前更快地呈现字体，且字体看起来更平滑。 （有关 Internet Explorer 9 中的字体硬件呈现的详细信息，请参阅 IE 团队博客上的 IE9 中的子像素字体。） 本主题包含以下几节：   Web 字体入门 font 元素 CSS 字体属性 字体嵌入 其他解决方案 WOFF 格式 使用 Internet Explorer 9 […]

如何使用 CSS3 创建酷炫十足的按钮创建按钮, CSS3CSS3, 创建按钮Web 设计, 按钮

注意  本主题受 ZURB.com 上的这篇博客文章的启发并针对 Windows Internet Explorer 9 进行了优化。 利用 层叠样式表 (CSS)，级别 3 (CSS3) 和 Internet Explorer 9，只需少量几个标记，您就可以创建外观非常吸引人的按钮。 本主题演示如何完全利用 层叠样式表 (CSS) 将简单的超链接转换为时髦的按钮。 本主题包含以下几节：   起点 添加圆角 添加阴影 添加透明渐变叠加 作为数据 URI 添加透明渐变叠加 汇总 相关主题 本主题包括以下 CSS3 功能： 使用 border-radius 属性的圆角 使用 box-shadow 属性的阴影 RGBA 颜色值 本主题还包括首次在 Windows Internet Explorer 8 中引入的以下功能： 数据 统一资源标识符 (URI) 透明 可移植网络图形 (PNG) 起点 在本主题中，我们使用如何使用 CSS3 添加圆角框中的同一咖啡公司示例。 我们会将棕色订单信息水平栏中每个产品描述后的“Order Now!”超链接变成一个按钮。 该订单信息栏当前如下所示： 此规则由以下类选择器定义：   复制

首先，让我们将“Order Now!”超链接变成一个基本的矩形按钮。 为了很好地与其他设计部分进行对比，让我们将此按钮设为蓝色。 我们还将增加订单信息栏的高度，以便容纳更大的按钮。 基本按钮的 CSS 如下所示。 （已声明此选择器，以便具有 product_orderinfo 类的元素中的任何 a 元素都会应用所列的声明。 这将确保此选择器只应用于订单信息栏中的“Order Now!”按钮。）   复制

这将使订单信息栏如以下图像所示： 我们还将添加以下选择器，以便当光标悬停在此按钮上时使其变成棕色：   复制

这将使得当光标悬停在此按钮上时它会如下所示： 可以查看修订过的页面。 还可以下载它的 […]

如何使用 CSS3 添加投影添加投影, CSS3CSS3, 投影

如何使用 CSS3 添加投影添加投影, CSS3CSS3, 投影   本主题向您演示如何使用 Windows Internet Explorer 9 和 层叠样式表 (CSS)，级别 3 (CSS3) 向布局元素的外部或内部添加投影。 您甚至可以为您使用 Internet Explorer 9 中新提供的圆角支持创建的圆角曲线添加阴影。 本主题包含下列部分：   方框阴影选项和语法 创建基本投影 使用投影创建“发光”效果 创建内部投影 使用其他浏览器创建投影 汇总 使用旧版 Internet Explorer 创建投影 相关主题 方框阴影选项和语法 投影是由 box-shadow 属性启用的。 像圆角一样，Internet Explorer 9 中的投影功能非常强大；您有多个可以指定的选项。 box-shadow 属性中值的顺序如下：   复制

此处，hoff 指示水平偏移，voff 指示垂直偏移，bd 指示模糊距离，sd 指示扩散距离，color 指示阴影颜色，而 inset 是一个关键字，使用时指示阴影为内部阴影，而不是外部阴影。 前两个值是属性工作所必需的值，所有值都必须按照列出的顺序指定。 如果未指定颜色，则 Internet Explorer 9 使用黑色作为阴影颜色。 此处定义了每个值： horizontal offset 此长度值是必需的。 它指定阴影向右（正值）或向左（负值）延伸的距离。 有关视觉解释，请参阅以下图示；hoff 指示水平偏移，设置为 20 像素。 vertical offset 此长度值是必需的。 它指定阴影向下（正值）或向上（负值）延伸的距离。 有关视觉解释，请参阅以下图示；voff 指示垂直偏移，设置为 20 像素。 blur distance 此正长度值指示阴影边缘的模糊程度，即模糊起点和终点之间大约的距离。 值越高越模糊。 有关视觉解释，请参阅以下图示；bd 指示模糊距离，设置为 30 像素。 spread distance 此长度值指示阴影形状在各个方向扩展（正值）或收缩（负值）的程度。 此值表示阴影在各个方向将延伸超过原始图形尺寸的距离。 有关视觉解释，请参阅以下图示；sd […]

如何使用 CSS3 添加圆角圆角文本框, 圆

通过使用 层叠样式表 (CSS)，级别 3 (CSS3) 为布局元素生成圆角，可以美化网站的外观。 本主题演示了通过使用 Windows Internet Explorer 9 中的新圆角内置支持让您的网站布局更具吸引力的几个基本方法。 它包含以下几部分：   起点 生成全部相同的圆角 分别生成多个圆角 使用椭圆生成圆角 使用其他浏览器生成圆角 汇总 使用早期版本的 Internet Explorer 生成圆角 相关主题 起点 对于本主题中描述的任务，我们从最基本的网页开始操作。 该页是一家虚拟的咖啡公司的网页，其中包括一些 HTML、一些 层叠样式表 (CSS) 和几个图像。 可以查看并下载 HTML 和 CSS。 下面的屏幕快照显示了初始网页。   要点   在创建您自己的网页以利用 Internet Explorer 9 中引入的新 Web 标准支持时，请确保在页面顶部包括以下 !DOCTYPE 指令：   复制

这将确保 Internet Explorer 9 使用最新的标准支持在“Internet Explorer 9 标准模式”中呈现您的页面。 有关详细信息，请参阅定义文档兼容性。 与许多其他布局一样，在此布局中，框有助于以可视方式分隔内容，并提供视觉吸引力。 同样，此布局完全是平直的。 不过，可利用 Internet Explorer 9 和 CSS3 为这些框生成圆角。 Internet Explorer 9 中使用 CSS3 生成的圆角非常可靠，并且这些圆角有很多种可能的组合。 在本主题中，我们将重点说明示例布局的三个区域，如下图中的突出显示部分所示： 咖啡豆缩略图图像的边框（由 product_thumb 类选择器定义） 靠页面右侧的边栏（由 sidebar ID 选择器定义） 靠页面顶部和底部的黄色标题带区（由 header 和 footer ID 选择器定义） 生成全部相同的圆角 我们将从咖啡豆缩略图开始操作，为其提供略微平滑的角。 若要为框生成全部相同的圆角，请为 border-radius 属性指定一个值。 […]

div 实现长英文字母自动换行CSS

自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法 最佳CSS定义换行代码 .wrap { table-layout:fixed; word-break: break-all; overflow:hidden; } 这里 overflow:hidden;或者 auto；