浅读 Media Query Level 4

目前主流浏览器对CSS3 Media Queries的支持度已经非常好,那么就展望看看Media Query Level 4~前段时间抽空看了一下,就挑选几条感兴趣的说下。由于目前文档并非标准而只是工作草案,所以本文所列内容随时可能过期,只作为一个向导。

更新频度 update-frequency

查询设备的实际更新能力,取值也比较直观:

  • none: 一旦渲染无法更新(比如打印机)
  • slow: 更新缓慢(比如电子墨水)
  • normal: 正常更新(比如我们更为熟悉的电脑屏幕)

这个查询可以为一些带有交互类的内容提供更多的外观控制,因为我们不是指定设备,而是根据设备的实际能力,对最终内容的样式加以优化。比如最简单的例子:

a{text-decoration:none;}  
a:hover{text-decoration:underline;}  
@media(update-frequency:none){
    a{text-decoration:underline;}
}

环境光 light-level

Level 4里添加了关于环境光的查询,这使得夜间模式变得可能。当然,现在已经有一些通过页面里的开关实现了类似开关灯的效果,效果其实也挺不错。甚至有一些浏览器单独实现了这样的一个模式,为夜间阅读注入特别的样式(主要是字体反白)。查询环境光需要光感传感器,由于现在手机上普遍已经搭载,所以light-level成为了一个很实际的功能。目前取值有三:dim(昏暗),normal(普通),washed(明亮环境,比如室外阳光下)。

这个查询看起来不错,不过实际操作起来是非常有难度的,因为很难界定。用户代理必须自己设定光亮的阀值,不同光感组件精度不同,而且手机自有的调亮功能也会影响到准确性,更不要说电子墨水在强光下的反而效果优秀了。所以,就目前而言这个特性显得比较空泛。

脚本能力 scripting

我们长期依赖noscript标签完成脚本支持的提示,但如果能查询到浏览器的脚本情况而应用不同的样式,岂非更好?所以 scripting 用来查询当前文档对脚本的支持情况。取值同样有三:

  • enabled: 支持脚本并且已启用
  • initial-only: 仅支持页面初始化脚本
  • none: 不支持脚本,或虽然支持但未启用

initial-only 比较少见,但却是有用的,比如对于打印机而言,我们有必要得到仅仅是初始化完成的页面,但可能并不需要其他后续的交互结果。另外,“none”代表了不支持和不启用两者,是否有必要对两者加以区分?个人认为,没什么必要。区别对待的话,也许我们可以提供更准确的提示语句,然而在这个脚本横行的时代,有点显得多余。

指针 pointer

pointer代表了指点的精度,是我看到目前为止,LV4最有用的一个查询。

目前,我们使用媒体查询往往只是通过宽度判断我们的设备大小,我们总是在默认越小的设备诸如平板和手机,其指点精度都不高,故而需要放大交互原件的尺寸,尽管大体事实上确实如此,但我们显然需要更为直观的确定方式——直接查询指点的精度。

指点精度影响可以影响整个交互,所以显得额外重要,尤其是当标准试图将所有设备囊括其中时。pointer取值同时有三:none(无指点),coarse(不精确,比如手指),fine(精确,比如鼠标),并且,缩放不影响值的判断。现在,我们就可以更为直观地加大我们的交互原件了:

@media (pointer:coarse) {
  input[type="checkbox"]{
    min-width:50px;
    min-height:50px;
  }
}

另一个重要的查询是 hover,即指点动作是否具有悬停能力。现代浏览器(特别是移动浏览器)对这个东西有各种特别处理,所以展开的话会超篇幅,放到下次单独写吧...

自定义查询 custom Media Queries

自定义查询,顾名思义,就是将定义好的某种查询命名,并可以在后续过程中组合使用。相对Level 3,Level 4添加了很多新的查询类型,这使得自定义查询变得有意义。只是即便如此,自定义查询的可用度还是太小了些。

结尾

还是学生时看Media Query还是遥不可及的梦,但几年一过,变化还真是很大。所以往前看一些总不会错的。虽然现在还用不上甚至显得鸡肋,但时间当真是转瞬,即逝。

BGM @ Don't Leave Me Now - Gregorian
BGM @ Believe ~instrumental~ - 梶浦由记


评论加载中...

Disqus提供评论支持,如果评论长时间未加载,请飞跃长城。