-
IE10的一些坑
不支持标准 touch 事件，要用 MSPointerDown 等 WP上有时候会有渲染问题，虽然支持 css3 动画，但是效果极差 你造吗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。 [codepen_embed height=”423″ theme_id=”5731″ slug_hash=”qpahd” default_tab=”result”]See the Pen <a href=’http://codepen.io/gsshcl/pen/qpahd/’>login form</a> by GSSxGSS (<a href=’http://codepen.io/gsshcl’>@gsshcl</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed] 话说sass支持@function了，好强大，强大的无法直视。 说不定哪天就能直接在sass里写ruby了，233。
-
sass – 2 colors gradient mixin with fallback
// calculate the middle color for fallback @mixin middle-color($c1, $c2) background-color: rgb((red($c1) + red($c2)) / 2, (green($c1) + green($c2)) / 2, (blue($c1) + blue($c2)) / 2) // generate linear-gradient @mixin linear-gradient($angle, $c1, $c2, $fallback: “”) // background color fallback @if ($fallback !== “”) background-color: $fallback @else @include middle-color($c1, $c2) // webkit linear gradient fallback @if…
-
谨记一次被非标准属性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没有…… =。=) 再高级的浏览器也是不可信的。
-
IE10 bug hack: box-shadow remains if box size changed
前按： 這是個我不想fix的bug，因為這bug和IE對css3的支持沒有任何關係，fix的方式也非常流氓。 Environment: IE10(10.0.9200.16384), Win8. Screenshot: Bug: 可以很明顯的從圖上看到，當內容通過ajax載入后，div高度一改變，box-shadow留下了殘影。
-
读书笔记 – 高性能网站建设进阶指南（2）简化CSS选择符
css selectors 性能消耗从低到高： ID selectors #modal { overflow: hidden; } class selectors .container { margin: 0 atuo; } type selectors a { color: #999; } adjacent sibling selectors input + label { display: inline; } child selectors label > input { display: none; } descendant selectors .foo a { text-decoration: none; } universal selectors *…
-
跨系统跨浏览器的“微软雅黑”
这个问题起源于设计要求某页面在任何装了微软雅黑的系统里都要显示微软雅黑。这就包括，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下的浏览器无法正确显示雅黑。