摘要:用ZenCoding这么久了,总结下常用CSS3的写法,方便以后查找: PropertyAlias@media print {}@mbox-sizing:border-box;bxz:bbbox-shadow:;bxsh-webkit-box-shadow:0 0 0 #000;bxsh:wborder-radius:;bdrsbackground-size:;bgzbackground-size:auto;bgz:acontent:;cttext-shadow:0 0 0 #000;tsh+ 阅读全文
posted @ 2013-06-20 15:14 白树 阅读 (1025) 评论 (4) 编辑
摘要:一直折腾position:fixed在ios和android的使用,而事实上这么上流的ios4系统居然不支持position:fixed,幸运的是苹果公司在ios5系统修复了这个bug,比较理想的解决方案是让所有用户把系统升级到ios5及以上版本,这种想法在国外还好,在国内环境下,因为越狱而不想去升级手机的人很多,如果强迫用户去升级,那可能会把你的产品KS了。而你也不可能跟你老板说ios4什么不兼容那个属性啊,让用户升级啊!老板看到的是结果,你做不出来,别人怎么做得出来呢,这样你老板可能会对你的能力感到怀疑,或者认为你并不专业......那其实回到头来我们还是乖乖去做好兼容,要么就找到完美的解 阅读全文
posted @ 2013-06-14 15:21 白树 阅读 (17890) 评论 (8) 编辑
摘要:Png是图像文件存储格式,在网页设计中已经不是一个陌生的名词,在前端开发中经常使用到它,如常用CSS 雪碧图。而Png的使用不仅仅如此,Png有多少种格式,有哪些特点,PC端中常用的Png格式是哪些,手机端最合适的Png格式是什么呢?如果你对这些问题有疑问,那么很开心的告诉你,这里有你需要的答案(*... 阅读全文
posted @ 2013-05-30 17:54 白树 阅读 (12882) 评论 (40) 编辑
摘要:在手机webkit浏览器中,用户在某一些按钮上长按3秒钟后,会弹出一个系统的列表,ios和android各自展现不一样,列表可以有复制或在在新窗口打开的等操作,这种体验对于按钮来说是不需要的,按钮上是绑定事件,有特殊功能,而这里系统把它当做一个链接的意义。查看了代码,原来是一个a标签,链接地址为空。<a href="#" class="btn">查看余额</a>找了资料后,ios平台有个解决办法可以通过控制当前元素的-webkit-touch-callout的样式属性为none;属性来禁止触发系统的菜单a{-webkit-touc 阅读全文
posted @ 2013-04-28 11:49 白树 阅读 (3656) 评论 (2) 编辑
摘要:大概是上个月,使用YUI压缩一个css文件后,发现只要是被压缩后的css文件有部分根本无法工作,一直都不知啥问题引起的,让我感到头疼。今天发现了只要是在媒体查询中的样式无法起作用,于是才开始怀疑是media被压缩后引起的bug,对YUI压缩不得不产生成疑问后来谷歌了:果然是YUI引起的bug:上面的图片解释为:如果电脑的YUI compressor还是旧的版本,压缩中,YUI compressor将media中的and后面重要的空格给删除了,导致media queries失效。后来我查看了电脑的YUI版本,我擦,居然是2009年8月份,严重out了- - 亲!要与时俱进啊!下载个最新版本后终于 阅读全文
posted @ 2013-04-18 18:53 白树 阅读 (1475) 评论 (1) 编辑
摘要:转载文章,原文地址:http://ipmtea.net/css/201006/16_5.html对于每个程序设计者来说,为用户提供一个风格统一的界面是一项不变的要求。但是在网页上实现这种风格统一却显得格外困难,因为不同操作系统、不同浏览器对网页内容的表现方式存在着差 对于每个程序设计者来说,为用户提供一个风格统一的界面是一项不变的要求。但是在网页上实现这种风格统一却显得格外困难,因为不同操作系统、不同浏览器对网页内容的表现方式存在着差异,而且这种差异几乎毫无规律性。在处理表单元素过程中这个问题显得格外突出,其中,让很多人束手无策的就是“Submit”按钮表现标准统一化的问题。 比如说,... 阅读全文
posted @ 2013-04-08 17:43 白树 阅读 (54621) 评论 (1) 编辑
摘要:微软推出免费开发者兼容性测试工具Modern.IE:输入URL即可获得网站IE兼容性报告,并提供相应问题解决方案。地址:http://www.modern.ie/zh-cn/modern.IE 是一个开发人员中心,提供免费的工具和资源,旨在使您能够花更少的时间来测试各种版本的 Internet Explorer,并留出更多时间在现代 Web 上构建重要的内容。仍有大量用户使用旧版 Internet Explorer 进行浏览,虽然现代 Web 标准和带平台预览的自动更新可能步向正确的方向,但是我们知道设备和浏览器版本的范围仍然对您的测试矩阵构成挑战。modern.IE 在支持旧版 IE 的同时 阅读全文
posted @ 2013-04-08 17:14 白树 阅读 (697) 评论 (0) 编辑
摘要:大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如:data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/ KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/ LCKuVgz5BDCSb13ZO99ZOdcZGvt4m 阅读全文
posted @ 2013-04-03 18:09 白树 阅读 (1860) 评论 (2) 编辑
摘要:如何优化网页加载速度是每个前端开发工程师需要了解的,也是前端开发工程师需要具备的基本条件。优化网站加载速度的原理主要是减少网站文件的大小,减少HTTP请求数。网站文件越小,浏览器加载页面会比较轻松,打开页面的速度也会提升;一个HTTP请求,对页面打开速度造成的延时大概是0.01秒,HTTP的请求数越多,网站打开的速度就会越慢。那么如何减少网站文件的大小,减少HTTP请求数呢?笔者做前端(重构方向)有2年多了,这里分享3项优化网站加载速度的方法,希望能给有需要的同学以及刚接触前端的初学者带来帮助~comm on!一起来优化你的网站~1、优化图片使用Css Sprites(适用于大流量的网站)其原 阅读全文
posted @ 2013-04-01 18:24 白树 阅读 (7461) 评论 (15) 编辑
摘要:这篇文章原文地址不知道在哪里!不管怎么样,对我的学习还是有帮忙,先收藏了。Web技术的发展速度太快了,如果你不与时俱进,就会被淘汰。因此,为了应对即将到来的HTML5,本文总结了22个HTML5的初级技巧,希望能对你进一步学习好HTML5会有所帮助。1. 新的Doctype声明XHTML的声明太长了,我相信很少会有前端开发人员能手写出这个Doctype声明。HTML5的Doctype声明很短,看到这个声明相信你马上就能记住,不用浪费脑细胞去记那长的有点变态的XHTML的Doctype声明了。HTML5的简短的DOCTYPE声明是让Firefox、Chrome等现代浏览器和IE6/7/8等浏览器 阅读全文
posted @ 2013-03-28 16:12 白树 阅读 (1451) 评论 (1) 编辑
摘要:近期接触了HTML5本地缓存,在HTML页面的html标签加入后缀为.appcache的文件,即可以轻松地创建 web 应用的离线版本。使用本地缓存带来的好处:离线浏览 - 用户可在应用离线时使用它们速度 - 已缓存资源加载得更快减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。浏览器支持:所有主流浏览器均支持应用程序缓存,除了 IEHTML5 Cache Manifest 实例下面的例子展示了带有 cache manifest 的 HTML 文档(供离线浏览):HTML页面demo.appcache文件Cache Manifest 基础如需启用应用程序缓存,请在文档的 < 阅读全文
posted @ 2013-03-28 15:36 白树 阅读 (2530) 评论 (3) 编辑
摘要:2012年8月份刚开始接触前端移动开发,现在主要是android和ios系统的手机,一套代码需要同时兼容android和ios,就android而言已经有N个型号的手机,如果css代码在这些手机上解析有稍微差别或者出现bug,那么,做兼容是必不可少,事实上随着手机版本的不断更新,产生一些不同的体验,这也可以理解为制造了bug~半年多了,遇到了不少问题,解决问题的过程即辛苦又很开心,辛苦是因为刚接触,很多知识都不懂,需要花费很多的时间去摸索遇到的困难,开心呢当然是接触到新鲜的手机开发,感到比较兴奋,学习了不少知识。好了,不多说,开始本次的主题,今天主要对iphone手机的兼容方法做总结。摘要:[ 阅读全文
posted @ 2013-03-21 10:43 白树 阅读 (5763) 评论 (2) 编辑
摘要:张鑫旭博客的一篇css3盒模型文章,对我而言,实用价值挺大的,多次重复打开该文章学习,这一次决定转载到我的博客!一、淡淡的开头语昨天趁着不想工作的时间间隙闲逛24ways,在My CSS Wish List一文中,见到了个新鲜的CSS属性,就是题目中的box-flex,以前没有见过,顿生疑惑,不知是骡子还是马,于是习惯性谷歌之,真是不谷不知道,一谷吓一跳。倒不是该属性本身,而是此属性作为导火索,让我了解了下CSS3中新的盒子模型——弹性盒子模型(Flexible Box Model)。对于我这样的流体布局控而言,这种盒子模型的出现就好比打麻将杠上开花杠到绝张边七条,让人兴奋不已。在国外,弹性盒 阅读全文
posted @ 2013-03-13 22:20 白树 阅读 (1089) 评论 (0) 编辑
摘要:推荐给大家一款免费PS扩展插件CSS3Ps,灰常好用,可以将Photoshop图层特效等效果直接转为CSS3代码,无需为了再浏览网页查询css3代码的写法,无需手动查看ps图层特殊的数据来编写css3代码,大大提升编写代码的效率,走过路过的同学不过错过哈!Come on,直接进去正题吧!!!下图为Photoshop CS5图层的混合选项菜单。有了CSS3Ps,上面的特效可以直接导出CSS3代码~以webkit浏览器为主的css3代码示例:圆角边框:-webkit-border-radius: 5px;模块阴影:-webkit-box-shadow: 1px 1px 1px rgba(0,0,0 阅读全文
posted @ 2013-03-09 14:30 白树 阅读 (7799) 评论 (6) 编辑
摘要:基于webkit内核的移动开发笔记,之前已经写过4篇,主要是关于移动开发重构的分享,今晚有空了再写一篇。回忆去年年底最后的一个项目,还有一个很怪异的bug,让项目团队的成员感到十分头疼。测试组的同事做完最后的测试回归后,项目发布上线,并通过微信推送链接。在ios系统中(android显示正常),微信内页打开链接后,点击页面的一个按钮,页面被重新加载了,这时才可以对页面进行其它操作。再次不断测试后,我们这边的同事肯定是微信软件内部配置引起的,可是微信的同事也无法定位具体的问题......纠结了很久....后来啊,想到各种蛋碎,才知道是a标签的引起的<a href="#none&q 阅读全文
posted @ 2013-03-08 00:03 白树 阅读 (3650) 评论 (5) 编辑
摘要:去年年底,做完最后一个项目就可以开开心心回家,可是在测试阶段,发现了不少bug,为了不影响回家时间,加班加点也要解决这些问题,这里算是工作回忆,也算是工作的一点小总结。在ios4+和android2+系统,当手指触摸屏幕a标签链接或按钮时,会产生不同的效果,对于ios点击元素的时候,就会出现一个半透明的灰色背景;对于android则出现红色的边框。对这2个系统自带的效果,这种体验的意义无非为了告知用户按钮已经点击到,带来的价值是好的。可惜带来了体验的同时,也带来了bug......主要是在android手机的一个bug使用css给模块设置了opacity:0,控制该模块隐藏,如果该模块包含a标 阅读全文
posted @ 2013-02-28 12:29 白树 阅读 (14165) 评论 (10) 编辑
摘要:PNG是我们经常使用的图片格式,但是你真的了解PNG吗?此次一淘前端分享会,一丝冰凉将带大家深入了解你不知道的PNG。首先有三个问题:什么是 PNG?PNG 有哪些特点?如何优化 PNG? Png的秘密 from jieorlin Png的秘密— 内容简介1. PNG 的秘密—— 你真的了解 PNG吗? By一淘 UX 一丝冰凉 旺旺:yisibl2. 首先我们来看三个问题:◆什么是 PNG?◆PNG 有哪些特点?◆如何优化 PNG?3. 一、 什么是 PNG?◆全称是: 便携式网络图形(Portable Network Graphics) 是一种:无损位图图像文件格式◆PNG... 阅读全文
posted @ 2013-02-27 17:43 白树 阅读 (1836) 评论 (1) 编辑
摘要:关于响应式的,近来国内外也不断提到,还是目前比较流行的技术话题,这篇文章来至淘宝UED的,讲得是响应式图片,写得很不错。随着Retina 屏幕的逐渐普及,网页中对图片的适配要求也越来越高。如何让图片在放大了两倍的Retina屏幕显示依然清晰,曾经一度困扰着网页开发者,好在CSS3 与 HTML5 已经着力在改变这种现状。那么到底什么是响应式图片呢?什么是响应式图片?响应式图片是指:用户代理根据输出设备的分辨率不同加载不同类型的图片,不会造成带宽的浪费。同时,在改变输出设备类型或分辨率时,能及时加载对应类型的图片。CSS3 响应式图片对于很多 IOS 开发者来说可能已经不太陌生了,为了适配 Re 阅读全文
posted @ 2013-02-19 20:51 白树 阅读 (3545) 评论 (0) 编辑
摘要:谈到渐变,大家并不陌生,设计稿中经常会遇到,其中最常见的也最平凡使用的是线性渐变和径向渐变,在pc端开发,很多大型网站都需要考虑所有浏览器的兼容,通常如渐变的按钮或者背景图一般会被重构师们切成图片,而在移动开发中如果使用图片是很占流量,能不用图片尽量不使用,那么,CSS3来实现无图的渐变效果是首选的。本文以移动开发中遇到的一个径向渐变例子,讲解CSS3径向渐变在项目中的应用和以及需要注意的地方。一、径向渐变的基础知识径向渐变的概念:从起点到终点颜色从内到外进行圆形渐变(从中间向外拉)。二、径向渐变的基本语法background-image:-webkit-gradient(type,x1 y1 阅读全文
posted @ 2013-02-17 21:26 白树 阅读 (8359) 评论 (18) 编辑
摘要:HTML5新增了video元素和audio元素,替代了传统HTML4使用复杂的object元素与embed来播放视频或者音频的方法。这次的一个项目,产品经理要求手机加载开始时播放音乐,想到播放音乐,又是在ios和android平台,那audio元素必然是首选。一、audio的基本知识audio:标签定义声音,比如音乐或其他音频流。二、audio的属性三、audio的写法写法一:你的浏览器还不支持哦写法二:优先播放音乐baishu.ogg,不支持在播放baishu.mp3四、audio实战在项目中使用audio,一开始在chrome浏览器下做测试,使用了autoplay和loop属性,在页面打开 阅读全文
posted @ 2013-02-05 17:03 白树 阅读 (20388) 评论 (24) 编辑