移动端开发

webstrom 使用技巧合集

最近玩了一下SASS,感觉不错,不过CSS3在不同平台兼容性代码一直是个头痛的问题,手写处理费时费力又容易出错。
曾经一直用sublime text写html和css,这些问题都有相应的插件。用Webstorm写js,但是来回切换编辑器也比较麻烦。
虽然Webstorm内置了css3自动补全功能,当输入user-select时,Webstorm会自动补全:

  1. -webkit-user-select: none;

  2. -moz-user-select: none;

  3. -ms-user-select: none;

  4. user-select: none;

但是很多情况下,这种自动补全并不令人满意,比如当我输入display:flex;时,Webstorm并不会自动补全为:

display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;

关于Autoprefixer

Autoprefixer是一个后处理程序,不象Sass以及Stylus之类的预处理器。它适用于普通的CSS,可以实现css3代码自动补全。也可以轻松跟Sass,LESS及Stylus集成,在CSS编译前或编译后运行。详情见,https://github.com/postcss/autoprefixer

当Autoprefixer添加前缀到你的CSS,还不会忘记修复语法差异。这种方式,CSS是基于最新W3C规范产生:

a {background : linear-gradient(to top, black, white);display : flex}::placeholder {color : #ccc}

编译成:

a {background : -webkit-linear-gradient(bottom, black, white);background : linear-gradient(to top, black, white);display : -webkit-box;display : -webkit-flex;display : -moz-box;display : -ms-flexbox;display : flex}:-ms-input-placeholder {color : #ccc}::-moz-placeholder {color : #ccc}::-webkit-input-placeholder {color : #ccc}::placeholder {color : #ccc}

Autoprefixer 同样会清理过期的前缀,因此下面的代码:

a {-webkit-border-radius : 5px;border-radius : 5px}

编译成:

a {border-radius : 5px}

因为经过Autoprefixer处理,CSS将仅包含实际的浏览器前缀。

具体安装和配置:

所以尝试在Webstorm下搜索autoprefixer插件,无果。那就自己手动配置了一个。首先我考虑配置File Watchers,但是不习惯,原来在sublime text下用autoprefixer都是手动触发的,所以后面我配置了External Tools。

1.首先当然是安装node.js;

(略)

2.安装Autoprefixer,

见https://github.com/postcss/autoprefixer:

sudo npm install autoprefixer -g

要不要加sudo,或者是不是全局安装(-g)那就看你自己的环境了。

npm太慢,我是用淘宝的 NPM 镜像的https://npm.taobao.org/

3.安装postcss-cli

Autoprefixer其实是postcss的插件,见https://github.com/code42day/postcss-cli

sudo npm install postcss-cli -g

4.配置External Tools

打开Webstorm设置,Preferences -> Tools -> External Tools ;点击新增按钮,如图:

769EDD8B-6AF0-4D6B-B73B-DF2DC25FAA1F

填写具体配置,例如我的配置,如图:

0C4975D0-6531-432B-8812-46D56164B817

  1. Program:填入你的postcss-cli 的PATH;

  2. Parameters: -u autoprefixer -o $FileDir$/$FileName$  $FileDir$/$FileName$ ,你可以根据你自己的需要配置,具体参见https://github.com/code42day/postcss-cli

  3. Working directory :$ProjectFileDir$

配置好后,你可以在css,或sass文件中右键,就可以在右键菜单中看到External Tools – autoprefixer,点击搞定,嘎嘎。

5.设置快捷键

右键太麻烦的话,可以设置个快捷键,打开Webstorm设置,Preferences -> Keymap , 搜索External Tools , 配置 autoprefixer即可。 不要和原来的冲突就可以了。

ps:windows下可以直接用autoprefixer的PATH,具体配置

414473-5caba82f3555f590 (1)


windows 找不到autoprefixer.cmd,webstrom无法用执行autoprefixer 这个问题,
可以配置
Program:C:\Users\gaojun-pd\AppData\Roaming\npm\postcss.cmd
Parameters:-u autoprefixer -o $FileDir$\$FileName$ $FileDir$\$FileName$
Working directory :$ProjectFileDir$


移动web开发之浏览器兼容问题

最近一直在搞touch站,也发现了很多的问题,主要还是浏览器兼容性方面的。之前做了几个效果在chrom的模拟苹果5上一点问题都没有,然后就用真机测试发现很严重的问题,尤其是在安卓浏原生浏览器上,还有就是万恶的uc浏览器。基本以为他们都是webkit的内核就不需要考虑太多。但是实际情况却不是这样的。



以uc为例,一般我们修改好央视文件之后传上去在其他浏览器看是ok的,但是uc 他妈的就是不对,但是把源码考到另一个服务器上就是好的,2份一样的源码显示效果却不一样,最后我怒了直接查看css样式文件通过uc浏览器。结果发现css的样式文件还是以前老的。他妈了个咪这是怎么会是,我说怎么一直找不到原因,操操操啊,后来升级了下css的样式文件版本号才解决问题,这是个天坑啊。。

还有一个问题就是uc浏览器的广告过滤问题,一直不知道uc云端的过滤方法是什么。公司的广告一直被ic屏蔽,当然百度jd的也都会被屏蔽掉。呵呵呵。我要好好找原因处理下。