让Compass支持sourcemap选项

使用Sass或Less的同学都知道sourcemap这个选项,编译时开启该选项后将生成map文件,非常利于我们调试Sass代码。 看一个浏览器调试sourcemap debugging效果: 可以看到,右侧的代码位置会直接定位到相应的Sass代码。 如何开启sourcemap?

HTML5游戏开发实战分享

现在越来越多的人开始尝试使用html5开发游戏应用,随着设备性能的提高,以及硬件API支持度的完善,这些条件让使用html5开发出一个媲美原生体验的游戏应用变得可能,或许你已经是迫不及待了。Web的优势不言而喻,跨平台特性可以大大降低应用的开发成本;知道地址就够了,服务器端更新,这些同时又能降低用户的获取成本。 但目前来说,使用html5技术还是会碰到不少挑战,本文主要分享手机QQ中一款html5游戏的实战经验,我们在开发的过程中,做了一些创新的地方,希望能给大家打开更多思路。 首先让来大家来玩一款游戏。在手机QQ的好友聊天对话框中,按右下角的“+”号键,即会出现“一起玩”的黄色Logo,点击Logo,即可进入“一起玩”平台选择游戏。 一起玩中的两款游戏都是html5应用,下面是开发过程中的一些要点。

使用DNS Prefetching加速网页

什么是DNS Prefetching? 在网站性能优化方面,大家都知道可以使用多个域名加载静态资源文件,解决一个域名下并发请求数的限制,同时也不会附带不必要的cookie. 但也并非域名越多越好,多个域名将增加DNS的解析时间。另外,在你的站点中,链接出去的也可能是其他域名。DNS解析所花费的时间变化很大,延时范围从大约1毫秒到以常见的几秒钟时间。DNS Prefetching就是为了加速DNS解析时间,它实现了预解析功能,从而减少后面资源的加载时间。 如何使用? <link rel=”dns-prefetch” href=”//host_name_to_prefetch.com”> 非常简单,在网页头部增加rel属性为”dns-prefetch”的link标签,并在href中指定想要预解析的域名。 Example: <html> <head> <link rel=”dns-prefetch” href=”//www.domain1.com”> <link rel=”dns-prefetch” href=”//www.domain2.com”> </head> <body> <img src=”www.domain1.com/image1.jpeg”> <script src=”www.domain2.com/script1.js”> </body> </html> 当你网站包含多个域名时,这个是一个非常实用的功能,现在就开始使用吧。 浏览器支持: Firefox 3.5+, Chrome, Safari 5+ and IE 9+ 参考链接: The Chromium Projects – DNS Prefetching Controlling DNS prefetching

IE下创建style标签出现未知错误的问题

动态创建一个style标签并设置css内容: var style = document.createElement(‘style’); style.type = “text/css”; style.innerHTML = “..css content here..”; document.getElementsByTagName(‘head’)[0].appendChild(style); 上面的代码看起来没有问题,但在IE6/7/8下访问你会发现提示出现未知错误。测试后发现问题出现在style.innerHTML这句上面,换成innerText依然报错。 解决方法是使用IE独有属性styleSheet.cssText,修改后是这样: var style = document.createElement(‘style’); style.type = “text/css”; if (style.styleSheet) { //IE style.styleSheet.cssText = ‘/*..css content here..*/’; } else { //w3c style.innerHTML = ‘/*..css content here..*/’; } document.getElementsByTagName(‘head’)[0].appendChild(style);

使用JavaScript实现media queries检测

最近在做一个项目,项目中需要根据用户的设备来加载不同的样式,比如同一个页面,如果是PC访问,则显示PC版样式,手机访问则显示mobile样式。这个是一个不完全属于响应式的设计。QQ会员下面有大量的活动页面,不同的活动页面结构会随主题而改变,不像首页之类的频道页。为了使手机用户也能获得更好的体验,我们专门设计了一套移动模版样式。 开始的时候我们直接使用css media query加载样式: 总体还Ok,各个浏览器都能兼容。此时产品观察到了一个问题,在PC下如果缩小浏览器窗口,则会切换到mobile.css,由于mobile.css是一套固定风格的样式,突然变换了风格,用户感觉起来将会很怪。于是我们就想区分PC与手机设备。 media: min-width 指的是浏览器窗口宽度,等价于document.documentElement.clientWidth;min-device-width 是设备宽度,等价于window.screen.width。 我们想到使用min-device-width进行判断,很显然这个行不通,很多设备的device-width比PC分辨率还宽。 最后也没能找到使用CSS控制的办法,只能是让JS来检测了。 最简单的方法是使用window.matchMedia: var mq = window.matchMedia( “(min-width: 500px)” ); if (mq.matches) { // window width is at least 500px } else { // window width is less than 500px } 但可惜目前在移动设备上支持度还不够。 换一个思路,先通过检测UA来区分移动设备与PC:

解决iScroll横向滚动区域无法拉动页面的问题

近期项目中使用iScroll遇到一个问题,在设定wrapper为横向滚动时,如果你手指放在该区域,将无法拉动页面,也就是说该区域取消了默认事件。这个体验是实在是无法接受,特别是页面中有多个横向滚动区域时,很容易触碰到这种区域,这时用户将觉得页面很卡。 Google搜了一下,看来很多人都为这个问题而烦恼。有高人给出了解决方案,在这里可以找到。 代码如下: myScroll = new iScroll(‘scrollpanel’, { // other options go here… vScroll: false, onBeforeScrollStart: function ( e ) { if ( this.absDistX > (this.absDistY + 5 ) ) { // user is scrolling the x axis, so prevent the browsers’ native scrolling e.preventDefault(); } } }); 重写onBeforeScrollStart事件,判断touch的滑动距离,只在横向滑动距离大于竖向滑动距离时(也就是左右滑动时)才取消默认事件,这样就不影响页面滚动了。看iScroll源码,onBeforeScrollStart: function (e) { e.preventDefault(); }, 它默认是直接取消默认事件。 [...]

如何调试less & sass

很多同学都已经开始在项目使用less或sass,它们用起来确实是很爽,大大提高效率呀。 less & sass 都无法在浏览器中直接执行,需要变成CSS。有时候想调试样式,我们看到的行号是css代码的行号,并不能直接对应到less&sass文件中,修改起来总是不方便。 看到less&sass这么受欢迎,热情的开发者们给firefox开发了一个插件 FireSass,后来chrome也跟上了,开启一个实验性功能支持sass调试。 具体设置如下:

[转载]前端开发工程师如何在2013年里提升自己

原文地址:Talks To Help You Become A Better Front-End Engineer In 2013 这篇文章其实文字部分不多,强烈推荐大家直接阅读原文,我这里主要是把文章里介绍的PPT简述一下,方便大家寻找。 =========================================================== 大部分人非常在意个人在技术上的提升。但是保持对新技术的了解是一项不小的挑战, 毕竟我们需要的信息在数量上过于庞大。2012年里,伴随着前端发展的是大量的革命性突破和对前端的重新定义。 我们在实践的路上飞速前进,具体的进步体现在使用抽象化,优秀的代码质量,维护性上的提升以及更好的性能。如果你实在忙到没有时间来跟上最新的技术,不用担心。 随着假日的来临,我们就有了一些空闲的时间可以自己支配,我想,如果我把我收集的前端相关的精品讨论列表分享出来,那一定会对大家有一些帮助。你不需要把所有的都阅读一遍,但是这些相关的建议会让你了解更多相关的知识,为明年成为一名更好的前工程端开发师做准备。

Chrome for Android远程调试

最近在做web mobile app实验性项目,在Android下面用chrome进行测试。 Chrome现在已经在Android、IOS下面都发布了正式版,Android需要4.0以上版本。在Android下面的chrome中包含远程调试功能,给了移动页面开发者很大的方便。 如何开启远程调试功能?

css动画transform与animation属性详情

css 动画: transform:2D变换 //参照:https://developer.mozilla.org/en/CSS/transform Syntax: transform: <transform-function> [<transform-function>]* | none Values: transform-function; none; transform-function: matrix: transform: matrix(a, c, b, d, tx, ty) //指定一个由6个值组成的二维变换矩阵 a:宽度缩放比 b:以x轴进行倾斜 c:以y轴进行倾斜 d:高度缩放比 tx:x轴位移 ty:y轴位移 rotate: transform: rotate(angle) //旋转效果 e.g. rotate(30deg) scale: transform: scale(sx[, sy]) //由指定[SX,SY]描述进行二维缩放操作 scaleX: transform: scaleY(sy) //x轴缩放 scaleY: transform: scaleY(sy) //y轴缩放 skew: transform: skew(ax[, ay]) //以x轴或y轴进行倾斜 skewX: transform: [...]