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(); }, 它默认是直接取消默认事件。 [...]

让VS2012支持Less css

最近安装了VS2012,喜欢她酷酷的Dark界面。 在项目中使用了Less来写CSS,在VS2010中需要使用扩展来支持Less的编写,并且也只是代码着色而已,没有像些css一样能有提示。 在VS2012中,可以直接设定Less文件的默认编辑器

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: [...]

transparent background for IE6

<!–[if IE]> <style type=”text/css”> .color-block { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50990000,endColorstr=#50990000); zoom: 1; } </style> <![endif]–>