IE10的一些坑

  1. 不支持标准 touch 事件,要用 MSPointerDown 等
  2. WP上有时候会有渲染问题,虽然支持 css3 动画,但是效果极差
  3. 你造吗font: 1rem/1 sans-serif;这么写竟然无效

最近在开发移动触屏版,申请了公款技术支持了一部Lumia 925,想做个兼容WP8 IE10的网站。
结果各种坑啊……
之前还碰到过可以透过一个 z-index 很高的 mask div 点击到下面的 link 的诡异事件。
虽然这个诡异事件还没解决,但是好像绑定了事件以后能够稍微缓和点。
为毛事件绑定不会穿透到下面去呢……

我的Draft很荣幸的存了4篇了,我果然是比较勤快的人……

// 2014-06-06 UPDATE

经过几次测试,发现IE10不支持font申明里用rem单位。
如果写成font: 1em/1 sans-serif;
或者分成font-size, line-height, font-family的话是没有问题的。
另外移动版的 IE10 表现和桌面版的 IE10 基本上是一样的,也支持 MSPointer 事件,就是没有穿透问题。

写个login form

随手写个login form,其实没什么inspiration。
顺便学习下jade,练习下transform。

See the Pen login form by GSSxGSS (@gsshcl) on CodePen.5731

话说sass支持@function了,好强大,强大的无法直视。
说不定哪天就能直接在sass里写ruby了,233。

sass – 2 colors gradient mixin with fallback

Don’t use mix($c, $c2) to get the middle color!
It will only retrun ($c1 + $c2) / 2, not the middle color.
Sadly, I failed to put color stop percentage in the mixin.
Only if sass rgb() could return a color(e.g. #fff) from a string(e.g. “#fff 10%”).

谨记一次被非标准属性background-position-y坑的过程

公司网站的背景是从早到晚渐变的,所以用了一张1px×13000px的图,每天根据时间不同,php那边算个bg-position中y的偏移值。
因为是php那边处理,当时php那边的人就顺手写了个inline style在某个module的layout的标签里:
style="background-position-y: {{ app.bg_position }}px"

后来我只是考虑到要把这个挪到全局layout里去,加个分号。
另加当时我脑残了一下css的平铺方向错写成了repeat-y,所以改好css,把style挪到正确的template里,我就没多想。
顺带确认了下repeat方向是x没错,bg-position位移方向是y没错,chrome下没错,IE下没错。
这便是一个悲剧的开始。

直到今天被人发现在firefox下白天显示着夜晚的深紫色渐变背景,只好开Inspector,
发现虽然body里有写样式,但inline element里却没有读到样式。

google之,才知道background-position-y/background-position-x是IE创造出的非标准属性,但是Chrome竟然支持了,但Firefox没有
firefox没有……

=。=) 再高级的浏览器也是不可信的。

教程:做套自己的icon font

Part 1: Why Icon Fonts?

Just because Icon Fonts are Awesome!

来谈个历史问题——
做兼容移动设备的网页时,retina屏幕的存在导致了我们经常要为一个logo做两套图
一套原始尺寸,另一套两倍尺寸,并且还要进行media query。

如果此时我们的logo可以随意放大缩小并且轮廓清晰的话就好了。
当然我们也可以用canvas或svg画个logo上去,但如果页面上有很多这类icon的话,这么做会累死人的……
随着扁平化设计的流行,我们的logo、icon似乎不需要设计的那么立体化了:没有渐变没有阴影,只是单纯的纯色图形
还记得以前在MS Word里用Wingdings字体打小图形的日子吗?
——纯色的、可缩放、轮廓清晰。
——没错,从很早以前开始,字体就可以满足我们这个需求了。

其实Github去年就开始用icon font来做网站的icon了。
并且,github也公开了他们的octicons,供大家使用。
bootstrap开发到3.0时,也把所有的图片icon换成了icon font
再到国内,技术龙头阿里巴巴下的一淘也公开了内部的UX图标字体库
再根据我对淘宝的观察,他们确实也有一套自己的icon font,但是至今没有公开。

所以说,Icon Fonts已经是大势所趋了!

Read More

读书笔记 – 高性能网站建设进阶指南(2)简化CSS选择符

css selectors 性能消耗从低到高:

  1. ID selectors
    #modal { overflow: hidden; }
  2. class selectors
    .container { margin: 0 atuo; }
  3. type selectors
    a { color: #999; }
  4. adjacent sibling selectors
    input + label { display: inline; }
  5. child selectors
    label > input { display: none; }
  6. descendant selectors
    .foo a { text-decoration: none; }
  7. universal selectors
    * { font-family: Arial; }
  8. Attribute Selectors
    [class^=”modal-“] { background: white; }
  9. Pseudo-Classes and Pseudo-Elements
    a:hover { text-decoration: none; }

Read More

跨系统跨浏览器的“微软雅黑”

这个问题起源于设计要求某页面在任何装了微软雅黑的系统里都要显示微软雅黑。这就包括,win下所有浏览器和mac下所有浏览器(我想没人会在linux下装雅黑的吧~)。

给font-family设定中文字体一般有两种常见方式:1、字体英文名,2、unicode。

我一直采用unicode的方法。
因为写成“Microsoft Yahei”的话,win下ff(曾经)和opera(目前为止)都不能正确识别。
写成unicode的话,win下所有浏览器都能显示雅黑字体。

但是这招在mac os下似乎行不通。
通过调试,基本确定mac下的雅黑的名字默认就是“Microsof Yahei”,不存在“微软雅黑”这个字体名。
所以mac os下写unicode是没法被识别成“微软雅黑”的。
但这样会造成win下部分浏览器没法正确显示雅黑。

终上,
如果想让win下全浏览器显示雅黑的话,font-family用unicode“\5FAE\8F6F\96C5\9ED1”;
如果想让全部装了雅黑的系统下的浏览器显示雅黑的话,font-family用英文名“Microsoft Yahei”,
但这意味着部分win下的浏览器无法正确显示雅黑。