跳到主要内容

热门网络标准:2012年5月

2012年5月,许多不同的工作组在Web标准方面带来了许多令人兴奋的发展。在这里,在常规系列报告的第一篇中,我将总结每位专业网页设计师需要了解的最热门话题和新兴趋势。如果任何概念似乎不熟悉,你可能想要先阅读8个最大的网络标准神话,被揭穿。否则,让我们开始吧!

混合模式和过滤器即将出现在CSS中

曾经想模糊HTML元素吗?灰度其内容?在它上面使用Photoshop风格的混合模式,比如“Multiply”?有两个新提案正是如此:

这些并不是全新的概念,它们在SVG中已有很长时间了。但是,这些新规范也会将这些效果带到HTML内容中。此外,他们还引入了一些简单的快捷方式,无需链接到包含效果的SVG文件。例如,要模糊元素,您只需执行以下操作:

  1. Filter:blur(10px);

过滤器还解决了CSS框阴影的常见问题,它不遵循元素的透明度,但总是矩形(见图)。 CSS过滤器可以产生完全遵循元素形式的真实阴影,考虑非实体边框,半透明填充,伪元素等。您可以使用dabblet来比较差异这里

混合模式同样适用:

  1. 混合模式:乘法;

有一些方法可以选择性地将混合模式应用于元素的某些部分,例如只有背景或阴影,但是这个的语法仍在讨论中。

Chrome已经支持过滤器(在-webkit-前缀),所以你可以随心所欲地试验它们。混合模式较新,尚未实现。但是,一旦他们获得了一些实现,您就可以立即开始使用它们,因为它们都非常优雅地降级。

这两个规格都是在外汇特遣队(FX TF),这是两者之间的共同努力CSS WGSVG WG。 FX TF专注于开发适用于CSS和SVG的新规范,以及合并和简化可应用于两者的现有技术(例如转换)。

响应式图像传奇

“响应图像”是用于描述的术语一些方法有条件地加载不同的图像文件,基于客户端的功能(例如屏幕尺寸,像素密度等)。

最近,有过很多讨论围绕标准化响应图像。在WHATWG邮件列表中出现误解之后,一群开发人员组成了W3C社区小组讨论该问题。经过很多来回,他们认为最好的解决方案是元件,包含一个或多个元素,以及可选的后备(例如)。这种方法的最大好处之一是一致性,因为它与其他HTML5媒体元素相同,例如。根据大多数作者的说法,它也是一种更优雅,更易于理解的语法。

不幸的是,事实证明,尽管有上述好处,但他们提出的解决方案更难以实现它与前瞻预解析器执行的工作冲突,即使正确解析内容之前,每种渲染引擎都采用的技术可以更快地下载资源。此外,有人主张媒体查询不是选择加载哪些资产的最佳方式。例如,如果我们有一个具有高像素密度的iPhone 4 Retina显示器,但是说目前iPhone上的数据漫游互联网连接成本为3欧元/ MB,我们是否加载高分辨率或低分辨率图像?媒体查询在这里没有帮助,并且作为使用数据漫游的人,我不认为这样的用例可以忽略不计。

由于这些原因,WHATWG决定了Srcset属性改为。很多作者愤怒关注这一消息,但在撰写本文时,WHATWG仍然不愿意改变他们的决定。此外,苹果已经实施了谣言Srcset在WebKit中,推动WHATWG走向它。

There’s been a big spat over responsive images but WHATWG is unwilling to reverse its decision

对响应式图像进行了大肆宣传,但WHATWG不愿意改变其决定

CSS对齐模块

在过去几年中,很明显CSS布局缺乏。 Floats和CSS表不是用于布局Web应用程序的。为了解决这个问题,CSS WG编写了许多不同的布局模块,例如Flexbox的网格布局

这些新模块最终与传统上在本机应用程序中使用的布局管理器相提并论。然而,Fantasai注意到他们每个人都引入了不同的心理模型和语法来进行对齐,即使这可以在所有与布局相关的CSS模块中共享。为了纠正这个问题,她开始了一个新的草案,试图将所有这些不同的模型合并为一个:CSS Box对齐模块3级。它仍然处于非常早期阶段,但它显示了许多希望。

Flexbox的正在进入Last Call,这是一个里程碑,它也将包含新的对齐属性。

CSS前缀,再次

几周前,Opera已经泄露了实际实施的决定-webkit-特征再次激起了CSS前缀剧。问题是多方面的,甚至可以说这是CSS WG遇到的最糟糕的情况之一。主要问题是每个提出的解决方案都会遇到以下四个问题中的至少两个:

  1. 不允许CSS WG获得足够的作者对实验性功能的反馈(例如,仅在非稳定的浏览器构建中限制实验性功能)
  2. 不允许CSS WG更改功能,因为任何更改都会破坏太多现有网站(当前情况)
  3. 不允许作者针对特定的实现,这是一个问题,因为实验性实现可以(并且应该)大不相同(删除前缀属于此类别)
  4. 如果允许作者以选择加入的方式定位特定实现,则他们不会负责任地处理它,将系统变成人气竞赛(当前情况)。

目前,似乎几乎不可能找到能够解决上述所有问题的圣杯解决方案。来自Opera的弗洛里安·里沃尔(Florian Rivoal)对此进行了拍摄一份提案它获得了一些牵引力,因为它几乎消除了#3和#4。不幸的是,它仍然遇到问题#2,所以它被拒绝了。

Web组件和Shadow DOM

其中一个最热门的开发W3C草案是关于影子DOM。 Shadow DOM是浏览器一直用来向我们展示更复杂的控件的东西,这些控件看似由一个HTML元素组成。例如,复选框内部由两个元素组成:一个用于复选标记,另一个用于复选框。还有更复杂的控件,内部由几十个元素组成,例如。但是,这是抽象的,我们只与代表整个组件的一个元素进行交互。这称为DOM封装,允许轻松重用组件,抽象出实现细节,就像OOP封装抽象出类的实现细节一样。

这个新规范的目的是为Web开发人员提供相同的功能,并允许Web应用程序具有与HTML本身一直相同的架构优雅。正如Jake Archibald说吧,“它将[浏览器独有]魔术转变为[作者]玩具”。最近,W3C的开发者关系部门Doug Schepers啾啾来自全球W3C会议,“Web组件和Web意图是至关重要的新兴技术”。

如果Shadow DOM草案规范对您来说太技术性,那么还有一个Web组件简介这更倾向于作者,而不是实现者。

两个新的API促进了游戏开发

随着Web平台越来越多地用于游戏开发,新的API出现以帮助这个用例。最新的两个是指针锁APIGamepad API

Pointer Lock API为鼠标移动提供了更细粒度的控制,并介绍了解决使用鼠标以某种方式移动元素的用例的方法。可以预见,Gamepad API提供了将Gamepad用作一流输入设备的方法,而不是让它模拟鼠标,这降低了它的潜力。尽管是一个非常新的想法,但已有一个Mozilla实验性地实现了Gamepad API

这两个API都是在WebApps WG

Mozilla has started implementing the Gamepad API on an experimental basis

Mozilla已经开始在实验基础上实现Gamepad API

全屏API

全屏API允许从任何Web应用程序请求全屏访问(Flash有一段时间,但缺少Web平台),以及检测和处理它。该草案已经存在了几个月,但现在已作为第一次公开工作草案(FPWD)出版迫在眉睫所以它再次成为人们关注的焦点。

全屏API是两者之间的共同努力的WebAppCSS工作组。它的早期草稿得到了WebKit和Gecko的支持。

非常感谢Fantasai大卫斯托里他们的想法和反馈

话:Lea Verou

LEA作为开发人员的倡导者W3C。她对开放式网络标准有着长期的热情,她通过研究使用它们的新方法来实现这一目标,写博客请讲写作,编码流行的开源项目帮助开发人员。

话题



翻译字数超限