如题,自己折腾网站时候关于前端性能方面处理的一点经验梳理。自我总结同时也希望可以和大家多多交流。
“CSS相关”目录存档
梳理:提高前端性能方面的处理以及不足
2013年04月3日,星期三有意思:textarea resize属性下纯CSS交互效果
2013年03月27日,星期三本文介绍的是使用纯CSS,利用textarea resize属性实现的一个交互效果,由于兼容性这个硬伤,仅供大家娱乐,仅供大家参考。
可缺省的CSS布局
2013年03月21日,星期四要赶着回去买菜,直接copy一段文中的话做摘要了~~
你永远不知道产品经理需要什么东西,因此,在页面布局的时候,一定要有强烈的意识:要是产品经理看这里不爽,把这里这部分干掉怎么办?如果干掉了,我是不是只要张个嘴让后台那边把这部分HTML注释或删掉就可以呢!
如果真能做到这样,哪有那么多加班?哪有改动恐惧症?哪有各种不满的吐槽?你应该有更多的时间去学习其他新的或者深的东西,而不是被本可以什么都不要做的改动折腾掉N多的时间和精力。前者久而久之良性循环,疾驰与他人之前;后者原地循环,跑步机上死命奔跑。
一句话,后期维护很轻松。装饰性元素自然必须可缺省,而且一点都不能影响布局;而功能性元素,也应该有强烈的可缺省意识,这样,或组装,或添加,或删除的时候,我们只要响应的HTML拖移、粘贴或删除就可以了。而且,布局可缺省,本身的容错能力也是相当强的。以柔克刚,万变归宗……
自己以前架构CSS/JS时候挖过的一些坑
2013年03月12日,星期二本文前半部分是故事,看似无趣的故事,其实解释了文章后半部分的糟粕所在。前后对应,其实对于大多数人而言,后半部分已经足够理解,故事嘛,只是想让文章不那么枯燥而已,您大可直接跳过。
都是些自己走过的小坑,希望对你的学习什么的有所帮助。
实验:absolute/display隐藏与回流等性能
2013年01月17日,星期四有个问题让我耿耿于怀3年,元素应用position:absolute脱离文档流这一过程会不会产生回流?OK,本文就将通过实验来解决这个困扰我多年的疑问。并通过其他一些测试,研究下各种隐藏方法的回流、布局、渲染等性能。
大量的demo页面以及截图展示,总之,希望本文的内容能够对您的学习有所帮助!
小tip: 某简单的字符重叠与图形生成
2012年12月26日,星期三本文比较短,摘要我也懒得写了,就是一个自己觉得不错的方法,跟大家分享下,有demo有截图有源代码示意,希望能对您的学习有所帮助。
残忍:IE10↘IE7-IE9 type=email的完全抛弃
2012年12月13日,星期四有个顽童名叫IE, 其9岁的时候,不举;10岁的时候,可以举。这位叫做IE的顽童,跟纲手婆婆一样,可以向下控制年龄显示,7岁到9岁都可以。但是,为了不让人看穿其真实年龄,当其7~9岁模样的时候,需要不举。不过,身体是同一副,诱人妹子在眼前,不是说不举就不举的……
……
直接把小弟弟咔嚓了,这样,不就举不起来了嘛!!哈哈,我好聪明!!
小tip:FireFox下文本框/域百分比padding bug解决
2012年11月13日,星期二我是流体布局控,经常会遇到文本框以及文本域宽度100%自适应显示的情况。对于文本框或者文本域,光标最好距离左侧边缘有一定的间距。
但是,如果只考虑文本框本身(父标签无其他特殊处理),这一套在流体环境下是行不通的,因为固定的padding数组无法让文本框永远100%自适应外部的宽度,至少非现代浏览器下是如此!
目前而言,好的解决之道是……
CSS3背景图片透明叠加属性cross-fade简介
2012年09月29日,星期六据说iOS6系统(iPhone5)增加了两个CSS3属性,一个是CSS3 filters – CSS3滤镜,在“CSS将图片转换成黑白”一文中就介绍过CSS3 grayscale滤镜;另外一个是CSS3 Cross-fade – CSS3交叉淡入淡出。
毕竟有IE滤镜这厮,所以前者看上去可能不那么显生;那后者Cross-fade是?