CSS4 Media Queries 新特性

标签: Front-end CSS4 Media Queries | 发表时间:2012-08-06 03:33 | 作者:葵中剑
分享到:
出处:http://www.swordair.com/blog

来自 css3.info 的消息,CSS4 Media Queries 已经成型,尽管它现在还只是一份 编辑草案,不过我们仍然可以从中看到新的 Media Queries 所具备的特质。在 Changes Since the Media Queries Level 3 一节里,就能看到 CSS4 Media Queries 的新特性。

当前,主要添加的是这三个新的特性值:” script“, “ pointer“, “ hover

script

如果没有记错,Zakas曾经就提过增加 script 特性值的建议。于是我很快翻阅了他之前的博客,并找到了这篇文章: Proposal: Scripting detection using CSS media queries。文章说的是,通过增加 script 媒体值,用来判断浏览器是否支持或者启用脚本功能,从而对应不同情况编写不同样式。

这样做可以让我们避免使用额外的类名来控制这些无脚本情况下的样式,并且,因为这些多余的类目的管理通常也非常费神,所以提供脚本检查的样式区分将独立并极大简化样式控制:

1
2
3
4
5
6
7
@media screen and (script) {
    /* 脚本启用时的样式 */
}
 
@media screen and not (script) {
    /* 脚本禁用时的样式 */
}

没想到,CSS4已经包含了这个功能,虽然 Zakas 提出的脚本特性值还包括一些更为高级的检测特性,但是CSS4刚刚成型,日后也还会不断完善。当前的note里就有这样一句:

A future level of CSS may extend this media feature to allow fine-grained detection of which script is allowed to run.

意指将扩展此特性值的并细化检测粒度。这样的话,未来脚本相关的样式控制会变的平滑许多。

pointer

随着各种触摸设备的流行,标准也是与时俱进, pointer 值就是用来检测设备的指针的存在和精度的。其值分为三种:

  1. none‘ : 表示没有指针存在
  2. coarse‘ : 表示存在不精确的指针,比如iphone类触摸设备。
  3. fine‘ : 表示存在精确的指针,比如PC机器(尽管我的G1用了8年已经有点不怎么精确了:)~)

这里,触摸类设备被划分到 coarse 里,没有指针并不是说屏幕上是否有指针,而指的是指向点击。并且,当前定义里,任何在选中小目标时有困难或者干脆无法点到的指针设备,都被归到 coarse

根据指针精度从而加大某些点击按钮或控件是典型应用,比如在触摸设备上增大 check box 的尺寸,让目标变的更容易点击。

hover

hover 属性值的出现其实也是在情理之中,是想,当前如此之多的触摸设备,其实它们都没有 hover。当前hover值几乎就是为鼠标而生的。这就会导致问题,所以,看到这个特性值的时候,我就想到的iOS,以及 Zakas 的另一篇文章: iOS has a :hover problem。文中描述了iOS的 hover 以及苹果如何解决触摸设备下的 hover 问题——对于有元素显示隐藏变动的 hover,iOS使用两次点击显示 hover 的变化。

现在,我们有了更好的办法。hover 特性值能帮助我们对是否支持 hover 的设备在样式上直接做区分。这太酷了,特别是对于那些纯CSS实现的下拉菜单而言。对于某些设备部分支持 hover 的情况,草案也有所描述,详细可以查看 4.16. hover 章节。

末了,我想说,当前虽无浏览器能支持CSS4,但整个浏览器大跃进的现在来看,情况还是挺乐观的。CSS3 Media Queries 是最早成为 CSS3 推荐标准的模块之一,所以我相信,CSS4 Media Queries 也能够最早的完成并被广泛的支持。而这也会把响应式Web设计推向新的高度。

Related Post:

相关 [css4 media queries] 推荐:

CSS4 Media Queries 新特性

- - 葵中剑's Blog - SwordAir.com
来自 css3.info 的消息,CSS4 Media Queries 已经成型,尽管它现在还只是一份 编辑草案,不过我们仍然可以从中看到新的 Media Queries 所具备的特质. 在 Changes Since the Media Queries Level 3 一节里,就能看到 CSS4 Media Queries 的新特性.

CSS Media Queries 模板

- - blog.moocss.com
CSS Media Queries 模板. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60.

HTML5实践 -- CSS3 Media Queries

- - 博客园_首页
  转载请注明原创地址: http://www.cnblogs.com/softlover/archive/2012/11/25/2787429.html.   demo查看地址: http://www.webdesignerwall.com/demo/media-queries/.   CSS2允许你对特定media类型制定样式,例如针对屏幕或者打印机.

CSS3 Media Queries的些野史外传

- BeerBubble - 张鑫旭-鑫空间-鑫生活
本文地址:http://www.zhangxinxu.com/wordpress/?p=1049. //zxx:本文是去年2010年,也就是去年8月24号一篇写了一半的草稿,正好时隔1年. 一、关于Media Queries这货. 去年我在制作“CSS3中文在线指南”时第一次见到该属性,当时的兴奋劲堪比路飞看到肉(最近在看海贼王),原来世界上竟有这等CSS属性,因为当时很多精力用在思考自适应布局与宽屏显示器下的页面布局,见此属性立马让我眼前一亮,青春绽放.

伪类+js实现CSS3 media queries跨界准确判断

- - 张鑫旭-鑫空间-鑫生活
本文地址: http://www.zhangxinxu.com/wordpress/?p=2387. 我们都知道,CSS3 media queries是 响应布局实现之利器. 国外很多著名的前端站点,如 css-tricks, smashingmagazinegazine等都采用了响应布局.

CSS3 Media Queries在iPhone4和iPad上的运用

- - Web前端 - ITeye博客
那么以后大家在iPhone4和iPad设备上,就可以按照横竖板来定样式了:. 上面四种CSS3 Media Queries就是用来对付iPhone4和iPad的,至于其他的运用,大家参考下面我重新整理的CSS3 Media Queries模板:. CSS3 Media Queries 模板:. 1、Smartphones (竖板和横板).

CSS3 Media Queries 详细介绍与使用方法,Responsive Web Design 必备技术

- - Web前端 - ITeye博客
上一篇我们介绍了 Responsive Web Design之后,这次要来详细介绍CSS3 Media Queries了. 在上一篇中,我们提到 Responsive Web Desig n的实作方式有大半都是利用CSS3 Media Queries来达成. 而顾名思义Media Queries 就是要在支援CSS3 的浏览器中才能正常工作,IE8 以下不支援.

CSS4 选择器

- iVane - 幸福收藏夹
CSS3 还没完全用上,CSS4 已经提上日程. 官方发布了 update to the working Selectors Level 4 spec,对选择器做了一些升级. 前端最大的优点就是技术更新快,可以经常学到新东西;最大的缺点也是技术更新快,要跟上潮流还真不是那么简单. 不过,这次更新有像“父选择器”这样让人兴奋的内容,让我们先睹为快,了解一下吧:.

ROI Media:反思网站设计

- - 中文互联网数据研究资讯中心
现在谁都可以轻松做一个网站,但根据ROI Media,只有4.13%的网站具备有效的HTML和CSS,更让人担忧的是只有40%的用户能在站点上找到他们需要的信息,这可能是用户自己的错,但也可能是由于糟糕的设计. Tencent CDC:工具型网站首页的设计思考. Hubspot:网站首页12大元素--信息图.

media query ie8- 兼容实现总结

- - ria之家--RIA三部曲:jquery、ext、flex
由于业务形态原因,随着用户分辨率的提高,1024×768已不再是主流,宽屏用户比例越来越大,因此我们的响应式考虑如何充分利用PC用户设备上更多空间而设计. 下图为淘宝用户的屏幕分辨率和浏览器比例,鉴于ie8-浏览器目前占比约70%,media query的ie8-兼容迫于现实还是要做,泪……. media query简介.