css 图片宽高4:3_CSS Level 4和更高版本：2014年会有什么变化

css 图片宽高4:3

Over the last few years web developers have been forced to adapt to several major shifts: the rise of HTML5, a fount of preprocessors and JavaScript frameworks, together with a sweeping series of design trends driven by technological change. Mobile and responsive design, flat UIs, and deeply interactive pages have become standard practice in a very short period.

在过去的几年中，Web开发人员被迫适应一些重大变化：HTML5的兴起， 预处理器和JavaScript 框架的源头，以及技术变革带动的一系列设计趋势。 在很短的时间内， 移动和响应式设计，平面UI和深度交互的页面已成为标准做法。

At times it would be nice to stop and catch a breath, but the year ahead will offer no such opportunity: if anything, the pace of innovation will only increase.

有时停下来稍作喘息是个不错的选择，但来年将不会提供这样的机会：如果有的话，创新的步伐只会加快。

“浏览器中的PhotoShop”成为现实 (“PhotoShop in the browser” becomes a reality)

CSS blend modes, currently supported in Chrome Canary, should make it into Chrome main and (with luck) other browsers this year, putting far more visual design power in the hands of designer-developers. CSS Level 4 Color properties and values will tie into this in major ways.

Chrome Canary目前支持CSS混合模式 ，今年应该将其纳入Chrome主浏览器和其他浏览器中(幸运的是)，从而使设计师开发人员拥有更多的可视化设计能力。 CSS级别4的颜色属性和值将主要与此相关。

网络上真正的杂志式布局 (True magazine-style layouts on the web)

The CSS Shapes, Regions and Exclusions modules, originally spearheaded by Adobe, combined with the Line Grid and proposed Book and Figures Module, will finally allow rich, adaptable and fully-featured magazine-style layouts, which will be increasingly expected of designers.

最初由Adobe牵头的CSS Shapes ， Region和Exclusions模块与Line Grid和拟议的Book and Figures模块结合使用，最终将允许提供丰富，适应性强和功能齐全的杂志式布局，这将对设计师越来越多的期望。

业界更多地参与Web标准 (Greater industry participation in web standards)

While corporations have had a long relationship with the W3C and WHATWG, expect industry input to deepen this year. The most obvious and controversial example of this is EME, the proposal to introduce DRM into the HTML spec. Other areas, such as Adobe’s pushing of the standards above, are largely an unalloyed good.

尽管公司与W3C和WHATWG有着长期的合作关系，但预计今年的行业投入会加深。 最明显和最具争议的示例是EME ，即将DRM引入HTML规范的建议。 其他领域，例如Adobe推行上述标准，基本上都是非合金商品。

供应商前缀滑入过时 (Vendor prefixes slide into obsolescence)

The last few versions of Firefox have been completely prefix-free for CSS transitions, animations, gradients and transforms, as is Internet Explorer 10. Chrome and Safari are not far behind. Expect that trend to continue, with future experimental technologies hidden behind browser flags rather than prefixes.

Firefox的最后几个版本与CSS Explorer，Internet Explorer 10和CSS 过渡，动画 ， 渐变和变换完全没有前缀。Chrome和Safari紧随其后。 预计这种趋势将继续下去，未来的实验技术将隐藏在浏览器标志而不是前缀后面。

Flexbox成为标准做法 (Flexbox becomes standard practice)

While its adoption by web developers has been hampered by the many changes it experienced during development,

flexbox is finally ready for prime time, and is prefix-free in Firefox, Chrome and IE 11. The slow but steady decline in market share for IE 8 and 9 and the increasing ability of preprocessors to create adaptive code will mean that developers will be able to write standard flexbox layout for web pages without having to worry about older browsers.

flexbox终于可以用黄金时间了，并且在Firefox，Chrome和IE 11中没有前缀。IE 8市场份额缓慢而稳定地下降9和预处理器创建自适应代码的能力不断增强，这意味着开发人员将能够为网页编写标准的flexbox布局，而不必担心较旧的浏览器。

CSS与预处理器竞争 (CSS gets competitive with preprocessors)

The innovations of preprocessors over the last few years has not gone unnoticed by the groups contributing to CSS: they have been recognized as an excellent opportunity to see what features are desired by the community, creating a competitive testbed from which innovations can emerge to be enfolded into CSS itself. The most obvious examples of this are the adoption of calc and CSS variables, which will increasingly be used by developers this year. A number of preprocessors, such as Myth, have started to recognize this trend, and are anticipating what will become standard coding practices in the near future while creating CSS that works in browsers today.

过去几年中，预处理器的创新并没有引起CSS小组的注意：他们被认为是了解社区所需功能的绝佳机会，从而创建了一个竞争性的试验平台，可以从中发现创新到CSS本身。 最明显的例子是采用calc和CSS变量 ，今年开发人员将越来越多地使用它们。 许多预处理器(例如Myth )已经开始认识到这种趋势，并在创建可在当今浏览器中使用CSS的同时，期望在不久的将来成为标准编码实践。

WebGL进入移动 (WebGL comes to mobile)

With code appearing in the IE 11 beta and long established in other browsers, WebGL has good support across on the desktop, but still struggles to gain share in the mobile space, most especially iPhone and iPad. I suspect that this is partly due to the demand of JavaScript-driven 3D graphics on mobile processors and GPUs.

Frustratingly, WebGL code is in the Apple mobile platform and Chrome for Android, but remains accessible only to iAds and after enabling a browser flag, respectively: I’m hopeful that iOS 8 and Chrome 35 for Android will give web developers equal access to 3D graphics in the mobile browser.

令人沮丧的是，WebGL代码位于Apple移动平台和适用于Android的Chrome中，但分别仅对iAds和启用浏览器标志后才可访问：我希望iOS 8和Android的Chrome 35将为网络开发人员提供平等的3D访问权限移动浏览器中的图形。

HTML5移至“推荐状态” (HTML5 moves to Recommendation Status)

While it’s a formality from the perspective of most web developers, the enshrining of HTML5 as a standard by the W3C should put to rest the few remaining inconsistencies in the spec and draw to a close a contentious but very successful development process.

尽管从大多数Web开发人员的角度来看这是一种形式，但W3C将HTML5纳入标准是一种规范，应该可以消除规范中剩下的一些矛盾之处，并可以结束一个有争议但非常成功的开发过程。

眨眼开始出现 (Blink starts to emerge)

To their immense credit, Google’s movement away from the Webkit codebase and the adoption of the “Blink” engine in Chrome has been entirely seamless so far. In 2014, expect the gap between Blink and Webkit to become more apparent.

值得称赞的是，到目前为止，谷歌从Webkit代码库的迁移以及Chrome中“眨眼”引擎的采用是完全无缝的。 预计2014年Blink和Webkit之间的差距会更加明显。

工具集和工作流程成熟度 (Toolset & Workflow Maturation)

The last half of 2013 saw the increasing popularity of full-stack web development workflow processes that were built not by major corporations, but from the grassroots. Technologies like Grunt are automating much of the scut-work that developers have traditionally dreaded; Kickstarter-funded projects such as

Macaw

dangle the promise of finally delivering visually-based web design that produces clean, standards-aware code. My instinct is that in 2014 we’ll see the emergence of a series of robust, fully-featured options for a complex web development pipeline from screen to page.

2013年下半年，全栈Web开发工作流流程日益普及，该流程不是由大公司而是由基层组织构建的。 像Grunt这样的技术正在使开发人员传统上讨厌的繁琐工作自动化。 由Kickstarter资助的项目，例如 Macaw放弃了最终交付基于视觉的Web设计的承诺，该设计可生成清晰的，可识别标准的代码。 我的直觉是，在2014年，我们将看到从屏幕到页面的复杂Web开发管道中一系列健壮，功能齐全的选项的出现。

最后，自适应图像标准 (An Adaptive Image Standard, Finally)

Fluid images are a wasteful hack, and the proposed srcset syntax for adaptive images was poorly received. <picture> appears to be resurgent, which makes me very happy. We’ll have to see where this goes, but I am hopeful that 2014 will finally deliver a solution.

srcset 图像是浪费资源，并且针对自适应图像提出的srcset语法收到的srcset也很少。 <picture>似乎复活了，这让我感到非常高兴。 我们必须看到进展，但我希望2014年将最终提供解决方案。

That’s what I can see coming from the perspective of mid-January 2014: if you think I’ve missed something – or if there’s a technology that you’re particularly looking forward to – please contribute to the comments.

从2014年1月中旬的角度来看，这就是我可以看到的：如果您认为我错过了某些东西–或者您特别希望有一项技术–请发表评论。

翻译自: https://thenewcode.com/814/CSS-Level-4-And-More-Whats-Coming-In-2014

css 图片宽高4:3