发表于
2014-03-20 15:14:07
Retina屏下的1px边框的实现
Retina 下的真 1px 的东东现在常见的实现无非就是图片阴影缩放每种都有各自的用处。前段时间写了个“软图片”的实现.border {
background-image:linear-gradient(180deg, red, red 50%, transparent 50%),
linear-gradient(270deg, red, red 50%, transparent 50%),
linear-gradient(0deg, red, red 50%, transparent 50%),
linear-gradient(90deg, red, red 50%, transparent 50%);
background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%;
background-repeat: no-repeat;
background-position: top, right top, bottom, left top;
padding: 10px;
}缺点就是使用背景，使用时可能要配合padding，性能其实测试过，没啥影响。同样的方式也可以搞定分割线，细细滴会好看好多滴。.border {
background-image:linear-gradient(180deg, #cc
...继续阅读
(39)
发表于
2012-06-16 09:16:14
更新浏览器缓存
开始之前可以先看下这个Self-updating scripts，看完了接着。动态构建iframe 的好处在于，想清啥就清啥，清的不一定是固定的资源，总会有需要清滴的。IE还有可以让要清的js不用运行，webkit的好像没找到适合的方式。function clearCache(js) {
if(!(typeof(js) == 'object' && js.length>0 )){
return false;
} var isIE = (navigator.userAgent.match(/MSIE/)!=null);
var mimetype = isIE ? 'type="text/cache"' : '';
var jsClips = '
...继续阅读
(53)
发表于
2012-06-10 14:55:02
利用浏览器缓存来加速图片广告显示
显示一个广告通常顺序为向服务端请求数据，看看该显示啥图片请求图片下载图片 或者 使用本地缓存在这种情况下除了下载图片花时间外，请求数据有时也挺花时间，像请求阻塞这种还可以调整优化，但网络问题基本是没救的。通常说广告显示得慢就慢了，无所谓，但是对于把广告当内容用的主，开天窗（就是页面主要位置空白）时， 体验还是比较差滴。为了避免开天窗，我分析了下方案加 loading 图片，好像现在多数这样干。顺便推荐大家看下这两个 css3 实现的 loading 效果[1][2]我也做了个练习，方式不大一样 ^_^ 大家娱乐吧设置接口数据的过期时间，让其直接使用 local cache缺点：导致新广告不能实时的投放利用浏览器缓存显示上次广告当过渡，缺点：现在的浏览器缓存比较容易被 T 掉，也可能导致新广告不能实时的投放，比如新广告还没出来就被点走了也可能导致用户疑惑，刚看到的好广告想点却不见了，因为广告变了在广告不是每次刷新都变的情况下，我觉得组合 1 跟 3 来使用，效果应该挺好的。不过就算每次都刷新都不一样的话，其实也是挺有用的，因为下载图片要时间，又不过广告是跟RMB打交道 ，某些方面就要重新设计。第三种方案的实现比较麻烦的是判断图片是否在浏览器的缓存里img = new Image();
img.src = 'ad.url' ;
if( img.complete ) {
// a
...继续阅读
(23)
发表于
2012-04-02 06:52:11
Retina 显示屏下 @2x 图片的模拟
发表于
2012-03-08 13:42:32
transform:rotate在手机上显示有锯齿的解决方案
发表于
2012-01-12 16:05:04
暂停页面资源占用
“暂停页面资源占用”其实是个function，javascript也是可以用中文来写滴function 暂停页面资源占用(){
幻灯广告2.暂停();
文字滚动5.暂停();
啥啥啥动画.暂停();
定时更新长链接.低迷模式();
}为什么要这样做呢？ 装厚道，把资源让给别人，有些情况下还可以省自己服务器的资源。那什么时候调用他呢？onblur，那怎样变回正常呢？再写一个对应滴。但是这样看起来不是特别高级，怎样更高级呢？自定义事件 我记得好久好久前写过个task 让那些爱动的元素玩上onElementShowonElementHide这样的事件，然后就把上面的 function 分开了，让元素看不到时就可以开始暂停。其实还不够高级，我们还可以把 元素看不到 、页面 blur、窗口最小化 做进一步细分，不同阶段做不同深度的事。附窗口最小化检查function isMinStatus() {
var isMin = false;
if(window.outerWidth != undefined){
isMin = window.outerWidth <= 160 && window.outerHeight <= 27;
}else{
isMin = window.screenTop < -30000 && win
...继续阅读
(28)
发表于
2011-08-11 14:39:35
发表于
2011-07-24 09:19:29
判断一个网页是否适合手机浏览
最近在做一个项目，需要知道一个网页是否适合手机浏览，想了点方案。1.域名: 二、三级域名中包含有m 3g wap mobile 的算是。当然像 mobile也有坑爹的 比如像mobile.qq.com，mobile.yahoo.com2.网页的DTD: XHTML MP 或 wapDOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.dtd"但是wap并不一定适合手机浏览，有种破手机叫iPhone。他有个破浏览器叫Safari3.网页的meta里有viewport 如但是，可能只适合某些手机。适合手机访问不代表一定是手机版，某搜索就直接用这个判定为网页是手机版4.网页标题包含有“手机版” “触屏版”接着另一个问题，怎样让不适合手机浏览的网页变得适合呢？5.让spider 装手机去逛，看会不会适配。6.特定网站集的把topN的人肉找出手机版，找出与pc版匹配的规则，配7.使用中转服务百度：http://gate.baidu.comGo
...继续阅读
(23)
发表于
2011-01-01 15:11:11
iPhone Web App 动态 icon
发表于
2010-04-05 08:37:34
JavaScript组件打包模式
js组件通常带着css image ，但这样使用起来可能会有些小麻烦，为了让组件足够的solo，有了把css image也打包在js的想法，然后顺便把请求数变少，这个顺便好像更重要，呵呵。那怎样打包呢，虽然有resource-packages这样的方案，可是我们的核心用户还在玩ie6这种时尚的浏览器呢！我的方案：CSS：CSS可以当成字符串存在js里，并由js动态加到页面上，页面用的可能不适合，但组件通常不会影响。image：CSS里用的图片用dataURI（RFC 2397）跟MHTML（RFC 2557）的方式编到js里面。（秦歌写的dataURI和MHTML依然推荐给不知道是什么东东的同学看）。CSS里如果要绝对路径同样可以存js，js如果有直接用到的理论上也是可以，但js通常只改className会比较好。flash：一些比较小的flash，比如存储，复制等也可以选择打包，不过现在米解决非IE的问题，非IE使用外链吧这个有个打包测试的例子。一些细节和纠结的地方所有图片都打包到js里不一定合理，打包进去的应该是必用的图片。那排除的图片是再打一个包好呢还是直接用图片？图片可以先压后编，我选用的图片压缩工具是pngout，而且一般是用-s5。有人做了些测试Uncompressed data in base64? Probably not，大家自行判断。重复的图片引用直接用data
...继续阅读
(26)
发表于
2010-03-20 11:30:21
人民币的符号的正确表示法？一杠？两杠？￥还是¥呢？
因为做的项目会跟钱打了交道，所以被研究了。那是一杠还是两杠呢？最简单的方式就是拿出钱包，掏出张“新”的50或100，翻到背面的银线上，就会发现两杠的符号。这个是以前跟同事在讨论是一杠还是两杠时，发现最有效的方案。杠杠数的问题解决了，可￥（指的是通常输入法中文全角模式下按shift+4的那个）在宋体（v3.03, v5.0）的情况下是显示一杠 囧rz。不过还好的是，常见字体：微软雅黑（Microsoft YaHei），华文细黑（STXihei），細明體（MingLiu）能显示两杠，理论上以下写法可以解决大部分问题。font-family: 'Microsoft YaHei',STXihei,MingLiu虽然部分用unicode表示的中文字体名可能会更好（via中文字体在 CSS 中的写法），例如这样：font-family: '\5FAE\8F6F\96C5\9ED1','\534E\6587\7EC6\9ED1',MingLiu由于MingLiu也不是“盖”的，而且在12px上还算挺好看滴，看人个喜好，反正我不喜欢“乱码”。当然，如果你有更好的方案也可以介绍给我，还有一些想到的方案:编个字体，里面只有一个￥,用font-face的方式来使用，不过我也就想想，有兴趣的同学可以玩下。在研究过程中还发现了 ¥ （在HTML中，“¥”的命名实体是“¥”，字符代码是“¥”
...继续阅读
(32)
发表于
2010-01-30 13:55:45
MHTML在ie7/vista bug 解决方案
在多数情况下，以增加文件大小代价来换连接数是有价值。而MHTML+dataURI = 省连接数，如果你不知道这是什么东东，可以看秦歌写的Data URI 和 MHTML因为之前发现在vista上的ie7有bug，且没有好解决方案，所以一直不敢项目上使用，之前虽然有看到有个用304的方案(viaData URIs, MHTML and IE7/Win7/Vista blues)，但觉一来做起来折腾，一来效果也不好，特别是hover时。ie7 vista的bug大约这样，相应文件一旦local cache 后，浏览器就读不到。今天，我要骄傲的跟大家，有两种可行的解决方案方案1Content-Type:multipart/related;boundary="_aoao_org_cn"
--_aoao_org_cn
Content-Location:aoao.gif
Content-Transfer-Encoding:base64
... base64...
--_aoao_org_cn--注意最后的“--_aoao_org_cn--” ，查了不少资料，原来标准写法就是这样！（viarfc2557 第7页） 囧rz这个故事跟我们说一件事：有问题，查文档。 我之前一直以为cache到本地后浏览器木权限用方案2------=_NextPart_000_0000_12345678.1234567
...继续阅读
(45)
发表于
2009-09-23 19:31:09
一次炮轰引发的深思
话说前文，有人在无忧发了个书的推荐，然后hax与爱民同学讲解其样章N处不解（疑是错误，主要是作者认为不是错误，偶js又水平不行，不敢乱下定论）之处。。然后因为众所周知的原因，出现了炮轰事件，又见讨-论，那样多人推荐的一本书为什么会炮轰呢？ 怎没人来炮轰我的书呢? T_T 我经过深思后感觉原因有3点:我没RP水平烂到了没人理的地步没那样多人给我推荐当然3是最不可能的原因，肯定不是因为很多人推荐本书（因为没看过书，还不敢说是好书，当然也有可能是烂书，想当时，好像我也光荣的被邀请写书评，不过因为时间关系导致没写）就被乱轰，有人说是书的原因，这书到底好不好。个人很难断定，各有说法，当然像hax同学这种只看看样章就评价的行为并不是非常推荐的，不就在样章里找出一堆问题呢？难道整本书都跟样章一样，样章能代表这本书吗？再看看人家的专题站引用的评价的都是好的，哪来像你这样多问题，连taobao的阿当都说这书好（其实我不认识他，没听过，只是见作者引用，又失败一下），理论这样多人推荐应该算好吧，我们暂时先不讨论这书到底好不好。又有人说书有没有错误并不是主要原因，说的好像也是。好像我的书也有一堆错别字，还有属性打少字母的。其实很多书第一版都会有些错误（当然错误也有分不同的错法），以前也没见到这样大的事件，有错误应该不是核心问题。那又是什么原因呢？这让我大思不得其解，最后，不小心看到一篇名为《一些技术图书编
...继续阅读
(25)
发表于
2009-05-31 17:48:02
superLink，让伪链接更有可用性
前几天，看到有人写了个superLink的东东，主要的做什么用呢？我们有时会给在大块元素加个window.location='http://www.aoao.org.cn'，还顺便把光标定义成移上去会变成手势还代替链接，为什么不直接用因为有时东西太多，不能放在链接里，比如hx、p、li之类的。那问题来了，用js处理会让链接的功能没了一堆，作者在他的文章说到：中键：新tab打开 （aoao注：中键功能变更滴同学无视）CTRL/SHIFT 单点：新窗口 新tab打开（aoao注：自己浏览器改过设置以自己的为准）右键菜单：虾米虾米方式打开浏览器状态栏其他，等（aoao注：好像也没其他的）那看看效果：superLink Demo，试一下左中右键功能。实现其实不难，就是把你原来加window.location的元素上盖上一个链接，透明为0，这样就可以把上面4条功能还原，-_-!。总的来说，想法很好，有总比没有好，还封装好让别人用 ^_^，不过如果有机会再遇到类同的应用时，我应该会在原来那块元素里面的a里加个无用的span（语义愤青别BS我），虽然定位可能有点麻烦，但总是能定准的，直接样式搞定。
...继续阅读
(30)
发表于
2009-05-01 14:29:30
yslow 2 更新（含可下载地址）
在前端开发中，Yslow 是个很不错的参考，对于网站的优化也能提出一些不错的建议。这次的版本做了些很不错的修改，除了官方提供的地址在国内下载不了外没什么不好，详细的大家自己体验了。下载地址：官方下载（暂时下载不了，估计是文件服务器没同步，代理可下）我放在box跟自己的空间，是从官方下来的。
...继续阅读
(21)
发表于
2009-03-15 14:09:45
纯CSS在Firefox模拟text-overflow: ellipsis效果
发表于
2009-03-01 17:13:06
用私有属性来拯救IE7缩放图片的失真
发表于
2009-02-14 19:02:43
省市级联菜单的可用性
省市级联这东西基本是网注一份，而且基本是全是js写的，js写唯一坏处就是JS无效时不可用，我所说的js无效包括不支持js，js加载未完成或者失败。为了避免不可用，我曾经跟同事讨论过这样的实现方案。默认显示为 input , 没加载完或者XX时，用户也可以填；js有效时，用select代替掉input；如果input里已经有内容，要记得拿给select；某些情况可以考虑把第一个直接输出在html上。还要考虑的问题input 输入的地址数据的修正与格式(结构)化；不能格式化的前端反应。以前只是想想，最终因为XX原因米完成，今天不小心看到adsense 的注册页面也做了类似的处理。很好很强大。有些东西，并不是你想得到就一定得做得了，比如某网站全站都不支持html的form提交，哎。
...继续阅读
(21)
发表于
2009-02-08 15:39:10
语义化的label？
