PostCSS学习指南(二)

关于我最近学习PostCSS的一些相关心得和总结,主要介绍项目中可能用到的一些插件比如autoprefixer,postcss-partial-import,postcss-advanced-variables,cssnano,postcss-px2rem,precss等等

(推荐访问github上面的Markdown排版的介绍PostCSS学习指南(二))

继上一次PostCSS学习指南(一)后,渐渐开始在项目中应用。

这次决定主要讲解一些个人认为非常有帮助的PostCSS插件。

本期主要介绍以下几个插件和几个坑

  1. autoprefixer
  2. postcss-partial-import
  3. postcss-advanced-variables
  4. cssnano
  5. postcss-px2rem
  6. precss
  7. postcss-nestingpostcss-nested
  8. 坑( ఠൠఠ )ノ

autoprefixer

这个就不用多说了,必装插件之一。方便的写规范的css,它会为你提供非常完整的hack兼容方案的。当然这里需要了解一下的是,它的大部分兼容数据来源Can I Use,另外一个稍微需要了解的插件配置参数就是browsers,比如这样写:

module.exports = {
  plugins: [
    require('autoprefixer')({ browsers: 'last 2 versions' })
  ]
}

关于这个参数的详细介绍可以看看Browserslist Queries,文中说了,强烈建议将查询写入package.json(后面会告诉你为何要写在这里),而非配置postcss.config.js中autoprefixer的browsers参数。所以此处建议写法如下:

postcss.config.js

module.exports = {
  plugins: [
    require('autoprefixer');
  ]
}

package.json内增加如下示例

"browserslist": [
  "> 1%",
  "last 2 versions"
]

这里我对着官方文档简单说一下数组内的值对应的含义:

  • last 2 versions: 每个浏览器中最新的两个版本。
  • > 5% or >= 5%: 全球浏览器使用率大于5%或大于等于5%(上例中则是1%)。

其他的一些参数简单介绍:

  • ie 6-8: 选择包含ie6-8的版本。
  • Firefox > 20: 火狐版本号大于20。

还有很多不一一列举,这里的配置还是很详细的,一般来说最省事的就是不加参数,按照默认即可。

需要配置的话,就在package.json里面添加browserslist参数,这样其他插件也能够从中获取到项目将要兼容的版本,目前包含以下几个插件会读取改配置:

关于autoprefixer的介绍差不多就这些了~

postcss-partial-import

这个没啥好说的,也是很容易理解的插件,就是让你的css文件支持@import,支持W3C的写法也支持SASS那种写法,这里就不多说啦。

postcss-advanced-variables

同样的,像SASS那样可以自定义变量并进行引用,用法也十分简单,相信大家一定不用点开官方文档也会用的~(你肯定还是点开了哈哈哈~你这叫胡开链接综合症,生怕错过了啥内容。)

cssnano

很显然这个插件作者比较高调,github的cssnano上面是没有什么说明和介绍的,当然官方也写得很详细了。这个插件通俗来讲,就是css代码压缩工具,他的配置建议采用默认配置,除非你知道你在做什么。

当然我在测试使用中遇到了一点点问题,关于cssnano和autoprefixer结合使用,或者说是postcss.config.js插件引入顺序有关的造成输出不同的问题?我暂时还在研究,先看代码:

testcssnano.css

.test {
  -moz-border-radius: 10px;
  border-radius: 10px;
  display: flex;
}

postcss.config.js(第一种)

module.exports = {
  plugins: [
    require('cssnano')({
      preset: 'default',
    }),
    require('autoprefixer')
  ]
}

输出结果:

.test{border-radius:10px;display:flex}

postcss.config.js(第二种)

module.exports = {
  plugins: [
    require('autoprefixer'),
    require('cssnano')({
      preset: 'default',
    })
  ]
}

输出结果:

.test{border-radius:10px;display:-webkit-box;display:-ms-flexbox;display:flex}

问题一,如果手写-moz-,cssnano会清除,可见示例,当然或许这个属性在火狐已经支持不需前缀所以,就被去掉了。

问题二,如果在配置文件中,cssnano在autoprefixer之前引用,假设根据webpack的loader执行顺序规则相同的话,大概postcss.config.js中的插件也是这样由下而上依次执行,因此,在第一种例子中,css代码先被autoprefixer处理,然后再执行cssnano清除了那些多余的前缀代码?大致可分解为:

第一步autoprefixer处理结果:

.test {
  -moz-border-radius: 10px;
  border-radius: 10px;
  display: flex;
  display: -webkit-box;
  display: -ms-flexbox;
}

第二步cssnano处理结果:

.test{border-radius:10px;display:flex}

可是我要遗憾的告诉大家。。。这个可能是错误的结论!!!

因为我将第一步的结果作为初始css,将postcss.config.js中仅引用一个cssnano插件来执行的结果如下:

.test{border-radius:10px;display:flex;display:-webkit-box;display:-ms-flexbox}

因此,这个问题就来了。。。cssnano确实将-moz-去掉,但是他并没有处理其他的关于display的兼容代码。

于是我再做了一个测试:

我将css代码改为:

.test {
  -webkit-transform: scale(.5) translate(10, 20);
  -moz-transform: scale(.5) translate(10, 20);
  -ms-transform: scale(.5) translate(10, 20);
  -o-transform: scale(.5) translate(10, 20);
  transform: scale(.5) translate(10, 20);
}

而postcss.config.js还是同时引入cssnano和autoprefixer,经过测试,无论谁先谁后输出结果均为:

.test{-webkit-transform:scale(.5) translate(10,20);transform:scale(.5) translate(10,20)}

如果css代码改为:

.test {
  transform: scale(.5) translate(10, 20);
}

postcss.config.js同时引入cssnano和autoprefixer,

第一种cssnano在前结果:

.test{transform:scale(.5) translate(10,20)}

第二种autoprefixer在前结果:

.test{-webkit-transform:scale(.5) translate(10,20);transform:scale(.5) translate(10,20)}

结果又不一样,不知道看到这里大家晕了没有。

根据观察,postcss.config.js的插件执行顺序是有要求的,至少在同时使用cssnano和autoprefixer的时候,cssnano一定要在autoprefixer之后,否则autoprefixer可能会失效!

另外cssnano和autoprefixer都会对很旧的兼容写法进行精简,例如上文有一段有很多个transform属性的css代码,autoprefixer会(根据browserslist)剔除其他的。

至于顺序问题,我后面继续进行研究!

postcss-px2rem

做移动端,适配是个头疼的问题,不过我目前还是使用想对稳定的方案flexible,那么就需要用rem来做主要的单位,这里不说适配问题只说这个插件,一般移动端,设计师给的设计稿都是750px宽,你只需要下面这样设置,就可以直接在代码里面写你在PSD量的像素值了,这真是太令人激动了!

require('postcss-px2rem')({
  remUnit: 75,
  threeVersion: true
})

因为这个postcss-px2rem又是来源于px2rem的,所以详细的说明见px2rem,我这里写了两个参数,一个remUnit,这个对应的是每rem对应的px值,既然750px,就写75啦,不知道这样理解对不对。另一个threeVersion则对应三个不同dpr下的大小,这个比较少用,需要注意的是处理这些参数,是否转换rem都和注释有关,这里就不细说了,看看文档就好~当然这里也埋下一个坑,等下会提到。

precss

这就是个大杂烩,主要是为了满足SASS开发者的习惯,继承了很多插件,本篇前后文都有提及precss内的部分插件,如果并不是全部用到,我建议还是一个个手动安装所需插件来进行配置,这东西,配好了以后也就不会经常改动了,而且个人认为用大杂烩很容易出现一些坑,又很难排查,例如下面两个插件,大家仔细看看。

另外还有几个插件,建议安装(当然如果你完全不知道干啥的可以忽略):

  1. postcss-mixins 一个和SASS的mixins用法相同的插件
  2. postcss-atroot 让你的嵌套css处于根部,官方有个bar.css的@import的例子很棒,可以看看举一反三
  3. postcss-extend 有相同结构却有那么一点点不同的区别,用这个可以方便的统一管理相同部分样式代码

其他的一些我个人觉得不常用或者说实用意义不大所以就没有写出来了。

postcss-nestingpostcss-nested

这两个也是从precss里面拿出来的,就是仿SASS的嵌套css写法用。为啥把这两个放一起写,因为他们长的太像了。只看名字鬼知道他们的区别,然而他们都被加入到precss里面去了。据precss介绍,他们两个的区别是:

光看这两行我是看不懂到底是个啥玩意,难道第一个是符合W3C规范的嵌套选择?粗略看了下两个插件的说明文档,没看出没啥区别。行,那手动写代码来一个个试试。先安装postcss-nesting,编译试试,哗嚓一片红。。。咋回事,我们先看看代码片段。

.catis-list {
  padding: 0 50px;
  overflow: hidden;
  li {
    list-style: none;
    float: left;
    margin-top: 38px;
    width: 113px;
    &:not(:nth-child(4n)) {
      margin-right: 66px;
    }
    .iconfont {
      font-size: 100px;
      line-height: 100px;
      color: #506071;
      display: block;
      text-align: center;
    }
    .cati-name {
      font-size: 28px;
      line-height: 40px;
      display: block;
      color: #999;
      text-align: center;
    }
  }
}

看似SASS写法没有任何问题。可是它提示的报错信息让人看不大懂

ERROR in ./src/style/index.css
Module build failed: ModuleBuildError: Module build failed: Error: undefined:783:6: property missing ':'
    at error (D:\webProjects\mobileweb\node_modules\css\lib\parse\index.js:62:15)
    at declaration (D:\webProjects\mobileweb\node_modules\css\lib\parse\index.js:223:33)
    at declarations (D:\webProjects\mobileweb\node_modules\css\lib\parse\index.js:252:19)

啥玩意missing了个冒号嘛。。。改来改去都不对。索性拿来官方的实例。才看清楚。原来每个嵌套的样式前面都需要一个&(注意符号后面有个空格),实际上应该如下才对:

.catis-list {
  padding: 0 50px;
  overflow: hidden;
  & li {
    list-style: none;
    float: left;
    margin-top: 38px;
    width: 113px;
    &:not(:nth-child(4n)) {
      margin-right: 66px;
    }
    & .iconfont {
      font-size: 100px;
      line-height: 100px;
      color: #506071;
      display: block;
      text-align: center;
    }
    & .cati-name {
      font-size: 28px;
      line-height: 40px;
      display: block;
      color: #999;
      text-align: center;
    }
  }
}

这里面有一段用到伪类其中&符号后面是没有空格的,是正确的。编译后的结果:

.catis-list {
  padding: 0 0.666667rem;
  overflow: hidden;
}
​
.catis-list li {
  list-style: none;
  float: left;
  margin-top: 0.506667rem;
  width: 1.506667rem;
}
​
.catis-list li:not(:nth-child(4n)) {
  margin-right: 0.88rem;
}
​
.catis-list li .iconfont {
  font-size: 1.333333rem;
  line-height: 1.333333rem;
  color: #506071;
  display: block;
  text-align: center;
}
​
.catis-list li .cati-name {
  font-size: 0.373333rem;
  line-height: 0.533333rem;
  display: block;
  color: #999;
  text-align: center;
}

那么这样就没有问题了。和官方的说明的是一样的,但是另一方面,如果每次都要写&加空格,那岂不是很麻烦,习惯写SASS的兄弟们肯定不愿意这样做啦。

那么我要说的就是另一个插件postcss-nested,如precss所述,这个的确是SASS-LIKE了。当然我暂时还不太明白为何precss要收入两个nest插件(为了满足不同开发人员的习惯?)。我们修改postcss.config.js使用postcss-nested,并重新修改样式代码之前第一段,再次编译执行,一切OK,那么结论就是,如果仅习惯于SASS的嵌套写法,安装postcss-nested插件即可~

坑( ఠൠఠ )ノ

  1. 最后来说说我遇到的坑,除了刚才说的cssnano和autoprefixer同时使用需要注意顺序问题。还有另一个顺序研究,就是确定好将要使用的插件后,在postcss.config.js中配置插件require顺序还是有讲究的,这里我个人观察的确还是从上往下的(至于是不是每个插件轮流处理完文件后挨个执行我尚不确定),比如说,postcss-partial-import这个理应是第一个引入的,你若是把它放在最后面,而css代码中第一行就用了@import那肯定会报错!所以,建议根据css代码的写法来决定你的执行顺序。
  2. postcss-nested插件是大部分SASS开发者所喜爱的,但是你在css文件中用sass写法会遇到以下几个问题:
    1. csslint,css文件不支持嵌套,变量等写法,如果你将文件模式改为sass,注释的方式会变成//,而非/* comments */,当然你可以手写/* ... */这样的注释,但是用快捷键进行注释会很痛苦。

      这里有个小技巧,让项目所有css文件均为sass模式下编辑,在项目settings.json添加:

      "files.associations": {
        "*.css": "scss"
      }

      当然你若是想要支持//注释也是可以的,请再安装postcss-scss插件,我这里不多说这个了,因为我已经决定手写注释了😭

    2. 你手写注释没有问题,然而编译出来的东西会出问题,你样式中最后一行如果将注释写在花括号内部,它转换出来的代码,注释会在外部,这是个大坑,因为在使用postcss-px2rem的时候,那注释来控制是否转换的功能就失效了。我文字描述可能让人迷糊,所以看看代码:

      例如CSS部分代码:

      .test {
        color:#999;
        border:1px solid #ddd; /* no */
        .inner {
          color:#333;
        }
      }

      转换后:

      .test {
        color:#999;
        border:0.13333rem solid #ddd;
      }
      /* no */
      .test .inner {
        color:#333;
      }

      而不是我想要的:

      .test {
        color:#999;
        border:1px solid #ddd;
      }
      .test .inner {
        color:#333;
      }

      理论上是应该输出我想要的结果,却没有输出正确,错误的将1px的border转成rem,原因就是先执行的postcss-nested将注释弄在外部后,postcss-px2rem无法识别到它的规则了。

      我一开始也是装了precss后发现该问题,后来查了很久才发现是这个插件的问题。同时也发现了这个人其实已经提过issue了Wrong location of comment of the last declaration in a nested rule definition只是没人解决。

      而我临时处理的方法就是只好将要注释的那段代码不要写在最后一行了。如下:

      .test {
        border:1px solid #ddd; /* no */
        color:#999;
        .inner {
          color:#333;
        }
      }

      可能有时候并不会有两个样式给border垫底,如果只有一行border的样式,就只能这样:

      .test {
        .inner {
          color:#333;
        }
        border:1px solid #ddd; /* no */
      }

      这样倒是可以了,不过看起来很奇怪,所以如果你使用和我相同的处理方式时,务必注意此点(写完本文时我似乎发现了更好的解决方案,等确认了没有问题后,放在下一期来写~)。

(我记得好像还有坑的,硬是想了半天想不起来了。。。那就先这样吧)

本期结语

最后如果你还想探索更多好玩的好用的插件,你可以看看这里PostCSS Plugins List还有这个可以搜索的分类插件列表,如果你发现了更棒的插件,也欢迎留言喔~另外上面的例子如果我没有写的很明白,或者你只是想直接拿来快速测试使用的话,可以看看这个mobileweb

(关于第三期PostCSS的内容还在考虑。。。可能是对第二期的补充和填坑~敬请期待🙃)

Visual Studio Code 设置同步到github的插件介绍及使用方法(Settings Sync)

最近基本上习惯了用VSCODE进行开发了.最主要的感觉就是查找JS里面函数定义和引用很方便.还有可能是装逼心理… :roll:

一开始不知道怎么备份VSCODE的配置,傻乎乎的把要用的插件抄下来,还有用户settings拷贝出来.每次换了电脑或者重装系统什么的都要重新备份.虽然来回调整的概率很低,但是突然哪天需要同步设置什么的就很麻烦了~至少我是在初期经常鼓捣这个编辑器,而且办公在家和公司是不同的设备~所以觉得还是很有必要的~

于是我今天要说的就是这个插件Settings Sync

官方都是英文的,不过还算简单,我把步骤简化一下.

1.安装插件并重启VSCODE就不用说了

安装Settings Sync
安装VSCODE Settings Sync后重新加载

2.重启后按快捷键 alt+shift+u (这里假设你第一次用)

它会弹出一个窗口对应的是github上面的创建个人gist的页面,如果未登录请先登录github.

github创建gist来存储设置
github创建gist来存储设置

保存后会生成一个key

请牢记token id,后面将会用到
请牢记token id,后面将会用到

3.切回到vscode,他会有个输入区,就是存放刚才生成的key

输入刚才生成的key
输入刚才生成的key

然后理论上他就开始对你本机的配置进行一个扫描上传了.至此上传工作完成.

接下来我们到另一台电脑上了下载配置.同样的先安装Settings Sync插件,并重新加载.

然后按快捷键alt+shift+d,就应该会弹出一个输入框,请在这里输入之前保存下来的key(GIST ID),回车后将会自动下载之前上传的配置.

那么下载完成后,你这台电脑修改了相关配置再次上传就好了.是不是感觉方便多了~

其他的说明,如果在输入gist id写错了,读取不到的情况下,大概需要重置设置,按F1,输入sync,这里有重置选项.试试看~

重置sync的gist配置信息等
重置sync的gist配置信息等

还有些其他的功能例如自动上传下载等等,不是很常用,大家可以自行看看官方文档,基本的使用方法就是这样了,我写的如果有问题或者哪里不明白的可以留言- -.

下面是官方说明

http://shanalikhan.github.io/2015/12/15/Visual-Studio-Code-Sync-Settings.html

插件地址

https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

jQuery Trickshots来自Tutorialzine的一本关于100个高级jQuery技术书籍分享

最近看到一篇写的不错的文章,来自jQuery中的100个技巧.首先感谢作者辛苦翻译.

不过我也想找原文…于是也是辛苦了很久才找到了这篇伟大的文章出处,更难能可贵的是该站竟然有多个版本的电子书,开放免费.当然是需要注册的,我注册了一个,下载了与大家分享.

这个压缩包包含了全部html,js实例源码,还有多个版本的电子版(pdf,mobi,epub),满足了用电脑,手机或者kindle的用户简直太棒了!!!迫不及待放出分享连接了.以下是分享地址

百度网盘: 英文原版下载页面(以及鸟语版,不懂鸟语的不要下)

如果不能下载了请与发邮件

最后再次感谢伟大的

作者:Tutorialzine

来源:http://tutorialzine.com/books/jquery-trickshots/

介绍:

In this book, you will find 100 advanced jQuery techniques that we have developed over the years as JavaScript programmers and authors for Tutorialzine, presented as easy to understand tips.

尼康单反摄影优化校准相关学习

那部Nikon D5000沉睡了太久了.因为年代已久,似乎我已不爱它了.曾经有一段时间,我每次带着D5000满怀希望的外出,希望能找到令人惊喜的照片,可是多少次带回来的是失望.可是后来我觉得这部单反还是很不错的.通过重新学习和认识D5000,来提高自己摄影水平,尼康单反摄影优化校准相关学习!

那部Nikon D5000沉睡了太久了.因为年代已久,似乎我已不爱它了.曾经有一段时间,我每次带着D5000满怀希望的外出,希望能找到令人惊喜的照片,可是多少次带回来的是失望.

于是渐渐地,我的手机开始取代它了.似乎快餐令人满意.生活节奏之快,让我忘记了初心,那些快感让我一直处于自我麻痹的快乐中.

前几日,我再次习惯性的带上了我的单反,和朋友们出游,他们也带了几部单反,闲暇之余,拿来朋友的Canon 600D,试玩了一把,同样是狗头,呈像效果完全不同…我试着将参数全部设置为一致.结果依然令我惊讶,我起初开始怀疑难道是因为这部用了6年的单反,要淘汰了吗.竟有买新机的冲动,是不是该换一步D7200了呢?

后来回来,翻了翻曾经的老照片,我仔细思考了一下,我否决了起初的想法.我认为我的D5000还能再战5年!!!(虽然有些夸张,但是大部分场景还是可以应付的).我真正该做的,大概是将它好好的保养一次,然后,重新阅读一次说明书.将各个参数的理解层次提高.我相信,这样一部老机器依然能拍出好的东西的.

接下来才是重点,学习研究过程中,离不开一些好的文章资料.这里也分享出来.

尼康优化校准设置杂谈2012新版
http://photo.withqiuliang.com/nikon_picture_control/index.html

尼康曲线(影像优化校准系统)详解 + 下载
http://bbs.rayi.cn/thread-261861-1-1.html

尼康优化校准曲线下载
http://www.ooidea.com/forum.php?mod=viewthread&tid=1617

尼康D5000使用技巧指南
http://jingyan.baidu.com/article/17bd8e52f954d585ab2bb8c0.html

Nikon D5000: tips for using your digital camera
http://www.digitalcameraworld.com/2012/09/08/nikon-d5000-tips-for-using-your-digital-camera/

Nikon D5000 Demo Review Tips 15 tricks – YouTube
https://www.youtube.com/watch?v=eRd6o9MyI50

好了先就这些了有空多读读.希望自己在未来一段时间能排出更好的作品~

dota2启动报错解决办法(CAppSystemDict::…RenderDeviceMgr001)

dota2启动报错解决
CAppSystemDict::LoadSystemAndDependecies():
AppSystemDict: Error in init() of interface ‘RenderDeviceMgr001’!

好久没玩下dota2了.有几个朋友找起说耍一下.决定一起开开黑玩玩…经过几G的更新等待.准备启动游戏…却弹出了这个鬼玩意…

dota2error

CAppSystemDict::LoadSystemAndDependecies():
AppSystemDict: Error in init() of interface ‘RenderDeviceMgr001’!

这到底是个什么鬼呢?百度一下…找到的都是以下几个无效方案(也许针对其他报错可能有用,但是如果你和我一样也是RenderDeviceMgr001错误,或许你就要用别的方法了).

  1. 检查文件完整性
  2. 找到安装目录的video.txt修改什么fullscreen为0还是1的什么鬼.
  3. 修改桌面分辨率.
  4. 还有不着边际的重装驱动,重装游戏或电脑(…)

反正都没用,也不知道他们怎么弄好的…

无奈用google查了下.可能有用的方法有以下的几个

  1. 删除游戏快捷方式的启动项或者是游戏设置的启动项,比如-console之类的
  2. 游戏启动项设置为-dx11

我是用了第二个就终于进入游戏了…希望有其他人遇到此问题,并用坑爹的百度搜索能找到正确的解决方案… :roll:

参考资料

  1. How to fix RenderDeviceMgr001 error
  2. Custom mode error – RenderDeviceMgr001
  3. Reborn: Getting a diff error message than everyone else

最后说明下我的配置: win10 64bit + GTX660M + 驱动359.0

SublimeText3的css文件引用图片转base64快速方法

如果在SublimeText3的css文件引用图片里将图片快速转换为base64(Data URL)的方法,以及利用chrome开发者工具获取图片的Data Url的方法

在你做的css文件中,起初背景图都是直接引用目录的切好的图片.如下:

.icons {background-image:url(../images/icon.png);}

那么在做移动端页面的时候,有时我们需要将小图直接转换成base64格式,一般只能借助第三方工具.
这里其实用sublime text 3 的快捷键ctrl+’可以直接快速转换.
当然页面的图片建议是压缩(例如tinypng工具)后的,要不然转换出的字符将会很长.
如果能确定页面的图片都可以直接转换,你可以直接选择 url( 然后快捷键 alt+f3 ,接着按 ctrl+’ ,这样一来css的图片就全部转换好了.

另外还有一种通过chrome快速获取网页上图片的Data Url方法.如图

chrome_ImageToDataUrl
chrome_ImageToDataUrl

win7安装本地Virtual PC虚拟机配置指南(一)

由于公司最近打击盗版比较严厉,之前用的Virtual Box安装的原版盗版XP也就没法继续用了,在双哥的指引写一篇关于微软官方自家的正版Virtual PC + 正版XP的虚拟机配置和基础使用教程,仅供大家参考咯~闲话少说,直奔主题.

准备工作

  • 拥有一台WINDOW 7专业版或更高级版本的电脑(本机适用的64 bit专业版)
  • 下载Windows Virtual PC安装程序(请注意下载对应版本)
  • 下载Windows XP Mode安装程序

安装程序(步骤)

Virtual PC安装程序
Virtual PC安装程序-确认安装
Virtual PC安装程序
Virtual PC安装程序-点击同意进行安装

安装完后要求重启,那么重启电脑后安装XP MODE

Windows XP Mode
Windows XP Mode-安装解压,解压速度与电脑配置有关,约10s-1min

继续阅读“win7安装本地Virtual PC虚拟机配置指南(一)”

win7下IE9打开页面无限崩溃解决办法

莫名其妙的win7下IE9打开页面就会无限崩溃,重置ie,卸载重装,停用插件,等办法均无效.最后通过设置”使用软件呈现而不使用 GPU 呈现*”修好了,还真是奇怪呢,也不知道错误模块名称: msvcrt.dll,然后就是异常代码: 0xc0000005了这些都是什么鬼

最近有个同事的电脑,ie总是崩溃,我说我去看看吧,结果弄了一个来小时.也没搞定,重置ie,卸载重装,停用插件,等办法均无效.于是怀疑是不是压根不是系统ie文件问题了..

可是百度搜出来的哪些解决方案,可用率大家也是知道了,基本上还没我懂- -…突然想到去查看事件查看器,那里对于崩溃原因有详细的说明.于是打开管理工具事件查看器,找到Windows 日志 > 应用程序,找到ie报错的大红感叹号,,,看看咋说的.好像看不懂饿,不过有效信息是错误模块名称: msvcrt.dll,然后就是异常代码: 0xc0000005了…见图

IE crash error info
IE crash error info

那么有了这个再去查似乎好办多了…很快找到问题所在了.废话不说,说说这个方案:

Win + R > “inetcpl.cpl” > “高级” > 在设置里面找到”加速的图形” > 勾选”使用软件呈现而不使用 GPU 呈现*” > 确定 > 重启电脑

再来打开ie测试一下,据说这个方法适用于ie9和ie11.当然测试环境是win7,据说不限于32位还是64位系统或者各种版本号…

另外值得思考的是,为什么硬件渲染会出问题呢,因为是公司电脑也不方便测试,初步怀疑是不是跟显卡驱动有关.如果有兴趣的话,建议尝试卸载旧的驱动,重新安装新的最稳定的显卡驱动进行尝试.

参考来源:
IE9 crash after opening any site
Internet Explorer 9 crashes – APPCRASH, Application Name: iexplore.exe, Fault Module Name: msvcrt.dll
如果您无法卸载 Internet Explorer 9 该怎么办

IScroll的click单击事件变为双击多次触发解决

前阵子做WAP端的项目,用到了iScroll插件,结果发现有很多问题,起初并未用多个设备进行测试,以为并没有什么问题,结果进入项目尾声进行测试的时候,竟被这个插件折腾了好几天简直让人抓狂.

前阵子做WAP端的项目,用到了iScroll插件,结果发现有很多问题,起初并未用多个设备进行测试,以为并没有什么问题,结果进入项目尾声进行测试的时候,竟被这个插件折腾了好几天简直让人抓狂.其间收集了一些资料,但是苦于项目上线后一直都比较忙,也就没有什么时间总结这个iscroll插件的一些问题,距离项目上线已经有了半个月了,我下文写的不好还请见谅.

首先iscroll是为了让wap端页面的的某个层内能够固定滚动而特别制作的,我起初想这个东西使用好像还是比较广泛的,问题应该不多吧.之前同事也有使用过,不过基本上使用的是简单的功能,而我这次进行的更多是复杂的交互效果,因此,让我纠结了很久的就是android手机在不同系统版本上,在不同浏览器上以及不同系统版本和不同版本浏览器这三种情况都可能发生各种问题.

参考资料:

https://github.com/cubiq/iscroll/issues/674

https://github.com/cubiq/iscroll/issues/547


以上内容是一个月前写的…我已记不清了,大概是处理不同设备的click事件遇到了很多问题,,,这篇文章放在草稿箱许久了,是时候终结了!

这个iscroll插件的确有很多需要注意的地方,仔细阅读了文档重要部分好几遍,结果写的代码还是问题很多,本文就iscroll使用上的一些问题总结一下与大家分享分享.

我们先来看一个demo(从项目中提出可能有部分冗余代码),主要用于分类选择,菜单弹出功能,(实际应用效果见太平洋电脑网手机端产品库页面,当然后期可能改版,实际效果与demo略有差异)如,用到zepto库,iscroll插件.其中iscroll主要是处理固定高度的滑动效果,它能够自适应并兼容很多设备,所以我选择了插件.

当然每个可以上下滑动的区域都需要创建一个IScroll实例,只需要简单的一句话即可,但是要遵守它的HTML代码结构,详细可以参考官方文档.这里就不讲基本的使用方法了,底部有资料写的很清楚了.我就简要说一下关于这个DEMO中的注意事项.

首先是这是一个带有弹出层的页面,每次点击导航会有一个向下滚出的层,那么弹出后就会创建对应的一个或两个iscroll实例,当点击顶部收回的时候,容易忽略一点,刚创建的实例依然存在,假设收回不销毁新建的实例,就会出问题!

其次,iscroll内的的click事件处理,默认是false,这在ios系统的手机上会出现click执行两次,也就无效的情况,需要改成true,所以需要对创建的示例增加参数.但是问题在于兼容了ios后,android各个版本会出现同样的问题.解决方案,对不同的安卓设备采取不同的click属性值处理,但是经过大量机器测试,依然可能出现无法兼容的情况(实际上是通过一个正则处理的,见代码)

function iScrollClick(){ //设备识别来控制iscroll的click真假
    if (/iPhone|iPad|iPod|Macintosh/i.test(UA)) return true;
    if (/Chrome/i.test(UA)) return (/Android/i.test(UA));
    if (/Silk/i.test(UA)) return false;
    if (/Android/i.test(UA)) {
        var s = UA.match(/Android [\d+.]{1,5}/)[0].replace('Android ','');
        return parseFloat(s[0]+s[2]+s[4]) <= 442 && parseFloat(s[0]+s[2]+s[4]) > 430 ? true : false;
    } //测试大量机器总结的规律,可能会有极小部分机器在选择功能上依然出现问题
}

其实官方文档中有一个options.preventDefault的属性可以配置,但是不知道是哪里出了问题,经过反复测试都没起到作用.于是这个问题折腾了很久…直到有一天…

虽然早起处理这个问题的时候就知道有fastclick,或许可以解决,但是又是一个插件,毕竟一个项目中用太多的插件不好,所以未采纳,前几天研究移动端的touch事件和普通的pc端click等事件时,更清楚的明白了一些东西,例如事件冒泡等…反复琢磨测试,觉得fastclick或许也是可行的,既然之前的方案不够完美,不妨试试这个demo,去掉了iscroll对click的配置(即默认都是false),并添加了fastclick插件及全局配置后,测试了很多机器,发现,并未出现问题.那么目前来看针对iscroll出现的双击,穿透,或是点击延时等问题应该全部处理好了!

毕竟这个内容过去太久,凭借回忆来写的,可能有些混乱,建议有遇到类似问题的朋友仔细看看两个demo的区别,一个是正则处理iscroll的click属性的demo,一个是用fastclick插件的iscroll demo,只需要注意两个demo的js的区别即可!

最后附上相关参考资料:

官方资料: IScroll官方网站 IScroll PDF参考手册 IScroll Github

其他: iScroll 5 API 中文版


后来发现,原来这不是万金油,总会有些坑爹的情况.比如魅族原生浏览器,还有chrome…竟然也会出问题,太失望了.

也就是说,在魅族原生浏览器下,需要设置为click : true才能正常运作,魅族原生浏览器如果false则会出现两次点击,而产生意外情况.而chrome则是当false时,整个iscroll容器内的事件全部被阻止了..没有办法只得打补丁了.于是加了以下代码…

var clickBoolean = false;
if (/Chrome/i.test(UA)) clickBoolean = true;
if (/534.30/i.test(UA)) {
    if (/UCBrowser/i.test(UA)) clickBoolean = false; //覆盖同版本
    else clickBoolean = true; //魅族原生?
}

我本来想通过UA标识来区分魅族浏览器,因为我这个写了534.30来区分魅族的方法风险太大因为UC也是这个版本,所以又加了一条如果是uc还是要用false,想在魅族的UA上处理,但是魅族原生浏览器真的很坑,UA上面根本无法下手.只能临时采用下策了.

这几点是需要大家注意的…(2015年2月2日18:54:00)

chrome 39 有时候出现无法调试?

这几天做东西发现chrome 39的多个版本上,在带有参数的url链接上出现无法调试的情况,而且相当频繁,实在是让人恼火又着急.本机的是版本 39.0.2171.71 m,包括办公室的另一个chrome 39也这鸟样…

这几天做东西发现chrome 39的多个版本上,在带有参数的url链接上出现无法调试的情况,而且相当频繁,实在是让人恼火又着急.本机的是版本 39.0.2171.71 m,包括办公室的另一个chrome 39也这鸟样…

不知道其他人有遇到过吗,尤其是这个error.竟然搜不到- -!也是醉了.

chrome_debug_error
chrome_debug_error

现实出现console面板带抖动,文字变得不清晰,然后刷新页面几次就出现Failed to get text for stylesheet  1 : No style sheet with given id found, 其中的数字会每次刷新后累加…莫名其妙!

要问我解决办法,只能带着淡淡的忧伤的心情告诉你,我开了两个chrome,新版的是为了同步数据,旧版的是为了调试 :cry:

PS:

或者在地址栏输入chrome://flags 全部重置为默认值(不过不敢保证有效- -)

或参考Error shows “Failed to get text for stylesheet (#): No style sheet with given id found”, what does this mean?不过似乎也并未提出良好的解决方案