摘要: 一旦资源被下载到客户端,浏览器仍然需要加载、解释和渲染HTML/CSS/JavaScript代码。你可以利用目前的浏览器的特点,通过整理你的代码来提高你的页面在客户端上的性能。使用高效的CSS选择器避免使用CSS表达式把CSS文件放在文档的头部指定图像的尺寸指定字符集(Specify a character set)使用高效的CSS选择器概观:避免使用需要匹配大量元素的低效率的关键选择器,可以加快页面的渲染。细节:浏览器通过构建一个内部文档树去解析HTML。然后它根据标准的CSS级联,继承和排序规则去匹配元素在不同的样式表中指定的样式。在Mozilla上的实现(也有可能是其他原因),CSS引擎 阅读全文
posted @ 2013-04-10 17:57 gamgam 阅读(528) 评论(0) 推荐(0) 编辑
摘要: 昨天在 twitter 上说,怎么忍心把页面写得这么难用?是的,这个世界还有一群人等着我们创建出来的东西,可以让他们的生活能过得更容易呢。比如那些需要读屏软件的用户。作为一个前端,我们又怎么会忍心呢。之前就一直想写这样的一篇文章,分享一下如何去创造一个可访问性更好的页面。今天的计划里有一条把 HTML Tag 和 WCAG标准结合起来。我推荐你这样去写你的 HTML,让某些人的生活可以更容易。今天想分享的是如何去使用我们的 HTML Tag, 把 WCAG 的标准和语义网的目标进行代码上的体现:1. 文档声明:<!Doctype>其实这跟 WCAG 根本上连不上什么直接关系,但 阅读全文
posted @ 2013-04-09 12:51 gamgam 阅读(305) 评论(0) 推荐(0) 编辑
摘要: 关于自定义浏览器滚动条的样式这一块,如果网站可以不考虑非WebKit内核浏览器的话,倒是可以试试只用CSS去实现。简单地修改一下几项,就可以看到效果了:::-webkit-scrollbar{width:12px; height:12px;} /*滚动条垂直方向的宽度与水平方向的高度*/ ::-webkit-scrollbar-button{} /*滚动条按钮*/ ::-webkit-scrollbar-track{} /*滚动条轨道*/ ::-webkit-scrollbar-track-piece:vertical{}/*滚动条垂直方向轨道件*/ ::-webkit-scrollbar-t 阅读全文
posted @ 2012-12-20 15:34 gamgam 阅读(741) 评论(1) 推荐(0) 编辑
摘要: 之前一直困扰自己的一个问题就是表单内radio、select等的对齐问题,一直以来,都是给提示添加label,然后跟radio等一起浮动,然后再设置margin解决的,但是这样又得另外解决IE6下的双边距问题,搞得自己相当恼。今天终于花了些时间找到了好的解决方法。在此罗列罗列,也希望能够帮到跟我同样闻form色变的人。先上解决方法吧:提示文字须添加label标签,然后样式表里定义input,select,label{vertical-align:middle;}eg.<label for=”bike”>自行车:</label><input type=”checkb 阅读全文
posted @ 2012-12-06 10:29 gamgam 阅读(1139) 评论(0) 推荐(0) 编辑
摘要: 用了一小段时间的sublime text2 了,自己所知道的功能也仅仅是冰山一角。为了不至于让这一点点东西也飘出海马体,特上此处备忘一番。插件安装:安装PackageControl组件(很多插件都可以通过package contorl组件直接安装):按Ctrl+`调出console粘贴以下代码到底部命令行并回车:Importurllib2,os;pf='PackageControl.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp)ifnotos.path.exists(ipp)else 阅读全文
posted @ 2012-10-31 15:18 gamgam 阅读(721) 评论(0) 推荐(0) 编辑
摘要: 什么是GoogleChromeFrame? GoogleChromeFrame中文译为谷歌浏览器内嵌插件(以下简称GCF),一款开源的InternetExplorer插件。使用该插件的用户打开浏览器的时候,将能体验到谷歌的开放式网络技术以及强大的javascriptV8引擎。GCF支持什么浏览器和什么系统? GCF只适用于Windows7Vista/XPSP2或更高版本系统上的InternetExplorer6、7、8和9(官网目前还说暂时还不支持64位的IE浏览器,实际情况我也没有测试)。上哪里下载GCF? 可以前往这里下载GCF插件:http://www.google.com/chr... 阅读全文
posted @ 2012-08-08 17:41 gamgam 阅读(768) 评论(0) 推荐(0) 编辑
摘要: 翻译来源:堂主的博客非常好的一篇技术文档,翻译自Louis Lazaris 2009年9月15日发表的《The Z-Index CSS Property: A Comprehensive Look》,相信会帮助很多像我一样的前端狂!原作者保留所有版权。EN文不好,欢迎各路牛头斧正。<———————————————- 分割线 ———————————————->大多数的CSS属性都很容易使用。常常,当您对标记语言的元素使用CSS属性时,产生的结果会随着您刷新页面而立即呈现。而另一些CSS属性,却会有一些复杂,且只能在给定的环境下才会工作。Z-index属性便属于上面所说的后面的那一组。 阅读全文
posted @ 2012-08-06 19:02 gamgam 阅读(556) 评论(0) 推荐(3) 编辑
摘要: 由于上头突然说要优化公司网站首页性能,为了提速,图片再压缩一下再实行gzip会好一些。网上搜索一番之后结合实际并且亲测后总结了一下个人认为可行的一些方法,希望对大家有帮助。倘若你有更好的方法,不妨也说说。总体方法:1、用Photoshop导出的图片普遍比用Fireworks导出的要大(同等质量)。如果想让图片小一点的话,建议用Fireworks把图片过一遍。2、使用Smush.it压缩图片,把压缩过的图片再用它压缩一次。地址http://www.smushit.com/ysmush.it/ Smush.it是YUI团队开发的一个“无损”图片压缩工具,它在不改变图片外观或视觉质量的前提下... 阅读全文
posted @ 2011-12-29 18:02 gamgam 阅读(1981) 评论(1) 推荐(2) 编辑
摘要: 前言: 今天被问道“有没有仔细了解过<!DOCTYPE>标签?”,愣了一下,因为一开始在W3cschool上看到过建议使用XHTML Transitional DTD,之后就很听话地把Dreamweaver的HTML文档类型默认设置为XHTML 1.0 Transitional。之后就理所当然地一直用到现在了。人这东西还真是,越长大就越懒了,很多东西都被潜意识地当成了理所当然。既然已经被问及,就去找了找资料,总结了一下,权当做笔记吧~~<!DOCTYPE>的定义: <!DOCTYPE>声明位于文档中的最前面的位置,处于<html>标签之前。此标签 阅读全文
posted @ 2011-09-30 17:52 gamgam 阅读(11692) 评论(9) 推荐(10) 编辑
摘要: 火狐的firebug用习惯了,在IE下处理兼容问题的时候,显得极度头痛,于是前阵子上网搜索了一下,发现有方法可以在IE中使用firebug.具体做法:在head中添加<script type='text/javascript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>如果想知道更多,请猛击这里》。 阅读全文
posted @ 2011-09-16 17:32 gamgam 阅读(586) 评论(2) 推荐(0) 编辑