postcss--预处理器与后处理器

这个听起来很别扭的后处理器(postprocessor)是个什么东西,预处理器大家很常见 less,sass,stylus……

今年关于越来越多的网站只使用-webkit前缀的抱怨越来越多(多数是装委屈的微软),其实已经有很多处理方案:

  1. 如果你项目里有用到sass之类的预处理器,@include可以帮你解决
  2. 编辑器里的emmet,在属性前加-帮你自动生成
  3. 打开prefixr来格式化一下
  4. 当然最好的方法是你随便写,然后雇个女秘书帮你补全。

autoprefixer

少年,醒醒吧,起来码砖了,哪有秘书帮你补全。这时候可以直接写标准属性,让autoprefixer,帮你处理,效果比秘书还好。
这个autoprefixer就是一个后处理器,可以分析你的css文件,并根据设定好的规则添加前缀,具体使用方法css-tricks 1 有详细的文章介绍,国内也有不少同学有翻译。
其实说到后处理器听着新鲜,并不是什么新鲜事物,用来在上线前压缩css文件的yui compressor也算是后处理器的一种。autoprefixer先进的地方在于其背后的postcss

postcss

postcss是一个css后处理器的框架,可以用来分析css规则,并给出AST(抽象语法树),可以很方便的用JS来修改CSS,剩下的只是你想你力的问题了。
严格上来说postcss不只是一个后处理器,只是因为提供了强大的功能,可以在后处理环节上代替预处理器的功能,让你在书写css的过程中,不需要去使用预处理器的奇怪的语法。

①sass(or less) --> ②css(dev) --> ③css(production)

在上面这个常见的workflow中,如果用预处理器,你要从①预处理器语法开始。不提预处理器在提供强大功能的同时,让学习曲线变得陡峭(其实也没多难),光是那些额外的语法声明,就大大降低了书写速度。使用后处理器的优势在于,可以直接从②css,好处不言而喻。

当然上面提到了,其实postcss不只是一个后处理器,如果你愿意,同样可以用它提供的功能来实现预算器。比如最常用的嵌套,可以直接在css里写,然后让postcss来处理,当然,如果你在css中使用了嵌套,其实已经使用了新的语法,本身已经是一种预处理了。

改进workflow

啰嗦了这么多,其实后处理器不是一种用来代替预处理器的工具,利用postcss,将整个workflow变得更高效和便利,如果有一些css之外的语法你仍然需要,比如嵌套、变量等等,仍然可以使用sass之类的预处理器来完成。但添加前缀转换单位低版本浏览器的hack之类的工作,完全可以放到 ② --> ③ 中让后处理器来完成。

polyfills

另外一个postcss可以大有用途的地方是结合JS做polyfills。举个栗子,比如常用的respond.js,由于要在浏览器端用JS去分析css文件去执行,虽然省事但效率不高。现在就可以用postcss在③步的时候分析出 @media query 对应的选择器和属性,并生成对应的json文件,然后直接用JS在低版本浏览器中去处理就可以了。类似还有calc()等都可以这样处理,目前postcss 2 官网已经有一些类似的插件了,自己的工作流程中有独特的需求,去实现一个也非常方便。有兴趣的同学也可以关注下postcss提到的rework3

iPhone6 Plus 放大模式

paintcode1 更新了之前的信息图,这一版内容完整。(update : 11-25)


关于 iPhone6 的分辨率, paintcode 2 的信息图里已经介绍的很详细了。万万没想到,真机到手以后,新手设置的时候居然还有个放大模式,这……

在 iPhone6 发布之前,是没有渲染像素的概念的,所以6之前的设备,物理像素和渲染像素是对应的。 devicePixelRatio = 物理像素 / 设备独立像素。渲染像素提出以后 在IOS上变成了 devicePixelRatio = 渲染像素 / 设备独立像素

iPhone6 以及 iPhone6 Plus 上设置里有一个放大模式。经测试,IOS 通过系统底层对渲染像素的控制,iPhone6的放大模式其实是模拟了 5(s) 的设备独立像素,而 iPhone6 Plus 的放大模式则模拟了 iPhone6 的标准模式。具体见下表


  1. http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions  

  2. http://www.paintcodeapp.com/news/iphone-6-screens-demystified 

移动设备的那些meta标签们

翻evernote的时候发现去年做触屏站的时候整理的笔记,整理一下扔出来吧

viewport (虚拟视窗)

viewport 1 标签移动网页中最常用的一个标签,最早由apple提出,现在已经成为事实标准了。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes,minimal-ui">
属性 例子 描述
width width=320,width=device-width 定义viewport的宽度(单位是像素)。
device-width代表适应设备宽度。
height height=480,height=device-height 同上...
user-scalable user-scalable=yes yes或者no来指定是否允许用户手动缩放
(不建议使用no)
initial-scale initial-scale=1.0 初始缩放比例
minimum-scale minimum-scale=1.0 允许用户缩放到的最小比例,范围(0.25~10.0)。
maximum-scale maximum-scale=1.0 允许用户放大到的最大比例,范围(0.25~10.0)。
minimal-ui 移动端Safari浏览器不显示地址栏和工具栏(iOS7.1新增)

MobileOptimized

<meta name="MobileOptimized" content="320" />

告诉浏览器页面为某个宽度特殊优化 (微软系)2

HandheldFriendly

<meta name="HandheldFriendly" content="true" />

告诉浏览器页面是否为手持设备优化,会被MobileOptimized覆盖 (旧浏览器和功能机上某些浏览器识别)

Apple私有

<meta name="apple-mobile-web-app-capable" content="yes" />

启用webapp模式,会隐藏工具栏和菜单栏

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

启用webapp模式后,定义顶栏的颜色,值为default(白色) | black(黑色) | black-translucent(半透明)

format-detection

<meta name="format-detection" content="telphone=no, email=no" />

电话号码和邮箱识别

target-densitydpi

target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]

安卓设备上viewport的属性3,对应屏幕像素密度 (低像素密度,中像素密度,高像素密度),无特殊情况不建议使用。

References:


  1. https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html  

  2. http://blogs.msdn.com/b/iemobile/archive/2010/11/22/the-ie-mobile-viewport-on-windows-phone-7.aspx 

  3. http://developer.android.com/guide/webapps/targeting.html