2014年前端将会发生什么

本文由大漠根据Dudley Storey的《CSS Level 4 And More: What’s Coming In 2014》所译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://demosthenes.info/blog/814/CSS-Level-4-And-More-Whats-Coming-In-2014，以及作者相关信息

——作者：Dudley Storey

——译者：大漠

在过去的几年中，Web开发者被迫接受了几大变化：HTML5的兴趣，预处理器的出现和JavaScript框架，结合一个庞统的一系列技术的变革，推动了整个设计的趋势。在很短的时间内，移动和响应式设计，扁平化(Flat Design)用户界面和深层次的交互页面成为标准做法。

有时候停止也是不错的，会变得更健康，但在2014年是否有这样的机会呢？如果有的话，创新的步伐只会增加。

PhotoShop的效果在浏览器中将成为现实

CSS的混合模式在Chrome Canary中得到支持，运气好的话，今年在Chrome和其他的主流浏览器中都能得到支持。这让懂设计的开发者得到更好的运用。CSS4的颜色属性和属性值将成为一种主流方式。

扩展阅读

• Compositing and Blending Level 1
• background-blend-mode
• Introducing CSS blending
• Browser Support Matrix for CSS Blend Modes
• CSS Background Blend Modes are now available in Chrome Canary and WebKit Nightly
• PhotoShop In The Browser: Understanding CSS Blend Modes
• CSS Blend Modes could be the next big thing in Web Design
• Blending CSS Gradients Like Photoshop
• CSS Background Blending Modes

Web上实现真正的杂志风格布局

CSS Shapes、Regions和Exclusions三大模块，最初是有Adobe团队提出，后面结合网格和建议使用书和数字模块，最终实现丰富的、适应性强、功能齐全的杂志风格的布局。这也是很多设计师期待的布局风格。

扩展阅读

• CSS Shapes Module Level 1
• shape-outside
• Using CSS Shapes to Enhance Visual Storytelling
• Creating Non-Rectangular Layouts with CSS Shapes
• Wrapping Content In Shapes With CSS3
• CSS Shapes the future of the web
• The CSS Shapes Module — Breaking Out of the Box
• CSS3 regions: Rich page layout with HTML and CSS3
• Magazine-like Layout for the Web with CSS Regions and Exclusions
• Regions use cases
• CSS 3 – Regions and Shapes
• The CSS Regions Module — Control Where Content Flows
• CSS Bleeding Edge Features

大工业参与Web标准

虽然公司曾与W3C和WHATWG有长期的合作关系，预计今年会深入投入产业化发展。这方面最明显和有争议的例子是EME和建议在HTML标准规范中引入DRM。其他方面，如前面Adobe推动的一些标准规范，在很大程度是都是很利好的。

浏览器供应端的前缀即将过时

Firefox浏览器最后几个版本为CSS3的transition、animation、gradient和transform等一些属性不用加浏览器的私有前缀。Chrome和Safari也不甘落后。按照这样的趋势发展下去，隐藏在背后的浏览器标志，在未来都不需要添加额外的前缀。

Flexbox成为标准做法

阻碍Web开发人员的发展同时，也让他们经历了很多变化。正如Flexbox他终于准备到达其黄金时间。在Firefox,Chrome和IE11都支持其标准语法，当然也无需添加任何前缀。随着IE6~8这样的老版本浏览器的市场份额的逐渐减少，这也意味着创建自适应的布局能力也越来越强。开发人员可以使用Flexbox编写出标准的网页布局，而不必担心老的浏览器不能支持。

CSS与预处理器之间的竞争

CSS预处理器在过去几年之中得到很大的发展，但这发展对CSS的用户群体并没有太大的影响：他们的功能与作用得到了一部分人的认可，这样也有了一个竞争平台，能得到更好的创新。而CSS本身并不着急，最明显的例子，CSS添加了类似于calc()和CSS变量,在今年将会有越来越多的开发者使用。一些预处理，如Myth，已经认识到了这一切，并且预测将会变成什么样子，在不久的将来会有一套标准的编码，同时在浏览器中创造今天的CSS作品。

扩展阅读

• CSS Custom Properties for Cascading Variables Module Level 1
• Using CSS variables
• A Look Into: Using CSS Variables
• New Awesomeness: CSS Variables
• About CSS Variables
• CSS Variables Preview

WebGL进入移动领域

WebGL在PC桌面浏览器上得到较好的支持，但移动设备的市场份额越来越大，特别是iPhone和iPad。我怀疑这部分是由于在移动处理器上是通过javascript驱动3D图片处理需求和GUPs。

无奈的是，WebGL在苹果的移动设备和安卓的Chrome上，仍然只能是iAds和通过开始浏览器的标记。我希望的是在iOS8和Chrome35能让开发者在移动设备上也能获得3D显卡。

扩展阅读

• WebGL
• Learing WebGL
• HTML5 and WebGL Examples
• WebGL on Mobile Devices

HTML5规范进入建议状态

这对于大多数Web开发人员角度来看仅是一个形式，但HTML5做为W3C的标准规范仅剩下几个还有争议的地方，而且也渐入尾声。可以说他的发展进程是非常成功的。

Bink内核开始出现

他们的功劳是具大的，Chrome团队将Webkit代码库移入Blink中，并成功完成无缝合并。在2014年,Blink会更回的让人闪烁，因为Blink和Webkit差距越来越大。

工具集和成熟的工作流程

2013年下半年，大企业创建全栈Web开发工作流程越来越普及。像Grunt这样的自动化工具，可以自动帮你完成很多重复的工作任务。Kickstarter资助的Macaw项目已交付，在视觉设计的基础上生成简洁，标准的代码。我的直觉是，在2014年我们将看到一系列强大的，全功能的选项，直接在屏幕上生成开发者开发的页面。

一种自适应图像的标准

流体图像仅是一种手段，他非常的浪费资源和使用srcset语法处理自适图像也很差。值得庆幸的是，就要步入死亡的<picture>标签再次复活，这让我感到非常的高兴。为了有一个解决自适应图像的完美方案，我们需要一个这样的元素。希望在2014年，能提供一个具体的解决方案。

扩展阅读

• Flexible Images
• The srcset attribute
• Responsive Images, Part 1: Using srcset
• ‘SRCSET’ ATTRIBUTE SOLVING RESPONSIVE IMAGE DILEMMA
• The picture element
• The picture Element
• HTML5 <PICTURE>ELEMENT
• HTML5 adaptive images: end of round one

这就是我从2014年一月中旬角度出发，我能看到的2014年Web将要发生的事情。如果你觉得我错过了一些东西，或者有说错之处，或者你觉得有还一些其他的技术发生，欢迎在下面的评论中给我们留言，一起分享。

译者手语：整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！

如需转载，烦请注明出处：

英文原文：http://demosthenes.info/blog/814/CSS-Level-4-And-More-Whats-Coming-In-2014

中语译文：https://www.fedev.cn/css/CSS-Level-4-And-More-Whats-Coming-In-2014.html

Sneaker Bar Detroit (SBD)