摘要:
对大布和裁纸刀下(补充)的版本合并后进行了修正 原文:Optimize browser rendering资源被下载到客户端后,浏览器仍需加载,解释,并渲染HTML、CSS和Javascript代码。只需利用现有浏览器的特性简单地编排你的代码和页面,就可以提升客户端的性能。使用高效率的CSS选择器避免CSS expressions将样式表放在页面顶部指定图像尺寸尽早指定文档的字符编码使用高效率的CSS选择器 概述避免低效的匹配大量元素的关键选择器 可以加快页面渲染。【译者注:参看高效渲染CSS学习写高效的CSS选择器】详细信息当浏览器解析HTML时首先构造一个内部文档树(document tr 阅读全文
随笔档案-2012年03月
高效渲染CSS
2012-03-14 15:43 by iBlog, 3369 阅读, 收藏,
摘要:
译自:http://css-tricks.com/efficiently-rendering-css/无可否认我并不经常考虑这个问题… 我们书写的CSS的效率如何,浏览器渲染它的速度如何?浏览器的开发者肯定关心这个问题(页面加载越快,人们用着越开心)。Mozilla有篇文章 about best practices。Google同样致力于让web更快,他们也有篇文章article about it。先来了解一下他们提出的主要想法,然后讨论其实用性。#从右至左#弄明白浏览器是怎样解读CSS选择器的重要一件事情是:浏览器按“从右向左”读取。意味着在选择器 ul > li a[title=&q 阅读全文
CSS选择器漫谈
2012-03-12 15:44 by iBlog, 506 阅读, 收藏,
摘要:
本文主要漫谈从CSS1.0到CSS3.0的选择器相关内容,在漫谈之前,还是需要简要了解一下CSS的发展历程。#CSS发展史#1994年哈坤·利提出了CSS的最初建议1996年12月CSS第一个版本被出版 主要定义了网页的基本属性,如字体、颜色、空白边等。第一版规范最新文档REC-CSS1-200804111998年5月CSS第二版出版 添加了一些高级功能,如浮动和定位以及一些高级的选择器,如子选择器、相邻选择器和通用选择器等。当前最新版本CSS 2.1CSS3 于1999年已开始制订,以模块的形式进行开发 2001年5月23日,W3C完成了CSS 3的工作草案,主要包括盒子模型、列表 阅读全文
chrome浏览器下“多余”的2px
2012-03-07 21:39 by iBlog, 1594 阅读, 收藏,
摘要:
箭头在调试页面的时候,发现select,input等元素在chrome浏览器下莫名的多了margin:2px,具体看图吧!stackoverflow上的提问中也类似的(应该是margin,好想提问的时候被说成了padding),如下:Firefox 4.0.1:adds no padding to the elementsChrome 11.0.696.68:adds 2px padding to top and left on input fields, but only 2px to top on select-elementsSafari 5.0.3:adds 2px paddin... 阅读全文
fieldset在ie8下的margin\padding bug规避
2012-03-05 15:31 by iBlog, 3319 阅读, 收藏,
摘要:
写在前面的话 其实我不推荐使用fieldset这个标签,正如我们常常议论的那样这东西在不同的浏览器下确实操蛋,但是在一些老的项目中大量使用,所以还是有必要分析一下,fieldset到底有哪些怪毛病,如何规避!我承认我闲的蛋疼,不喜请绕路!fieldset margin 测试 环境说明:win7 + ie 8.0 +chrome 16.0 +firefox 10<!DOCTYPE HTML><html><body><fieldset style="margin:100px auto;width:600px;height:100px"& 阅读全文
<select>在chrome浏览器下背景透明问题
2012-03-02 16:10 by iBlog, 8241 阅读, 收藏,
摘要:
在上篇文章《只用CSS美化选择框》运用了背景透明的技巧来美化选择框,但在chrome浏览器下遇到了跟ie、ff不一样的透明效果,下面重现一下: 在一个大的div(背景红色)内放置一个select元素(背景透明)。在线查看(可在不同浏览器中查看效果) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ... 阅读全文
只用CSS美化选择框
2012-03-02 11:04 by iBlog, 107933 阅读, 收藏,
摘要:
<本文译自Style a Select Box Using Only CSS>当我需要用下拉列表拼凑自定义表单时,我常常不得不使用下拉框(select),由于某些部分是浏览器特定的,如下拉箭头,我花了一段时间去搞清楚如何只使用css轻松地美化下拉框。下面是一个默认样式的下拉框的长相:HTML code:<select> <option>Here is the first option</option> <option>The second option</option></select>一个选择框的某些部分我们 阅读全文
浙公网安备 33010602011771号