Today’s Chrome Beta channel release includes a slew of awesome new features to help you make your web apps more powerful and beautiful. Unless otherwise noted, all updates apply to Chrome for Windows, Mac, Linux and Android.
<template> Element
The
<template> element is part of
Web Components, a set of cutting edge standards that will make it possible to build reusable widgets for the web. The element allows you to store HTML fragments that you intend to use for any reason at any time during the lifetime of your page, but that aren’t ready or shouldn’t be used during page load. Here’s an illustrative code snippet from the
HTML5 Rocks article:
Unprefixed CSS Transitions & calc()
CSS Transitions allow CSS property changes to occur smoothly rather than abruptly, as in
this demo. The
calc() function allows you to use basic mathematical expressions anywhere a length or number is required by a CSS property. Here’s some example code:
Both the prefixed and unprefixed versions of these features will work in today’s Beta, but you should switch to the unprefixed versions after Chrome 26 reaches the
Stable channel as we are ending official support for the prefixed versions.
activeTab Extensions API
Chrome extensions let you add custom functionality to desktop versions of the browser. Starting in Chrome 26, the
activeTab API allows your extension to interact with the currently active tab when the user invokes your extension - for example by clicking its browser action or hitting a keyboard shortcut. Since the
activeTab API requires a user action to activate, it does not cause an install-time permissions warning.
Other new web platform features
The web platform evolves rapidly. In this release, we’ve added the following:
- HTML <main> element can be used to represent the main content of the <body> of a document or application.
- CSS pseudo elements (like ::before and ::after) can now be animated and transitioned.
- Encrypted Media Extensions allow you to play protected audio and video content on the web. See them in action in this WebM demo, and note that they’re not yet available on Android.
- Enable the Experimental JavaScript flag in chrome://flags to try Object.observe(). It lets you add a listener to any JavaScript object that gets called whenever that object or its properties change, as in this simple demo.
Features removed
MathML has been
disabled in order to resolve security and stability issues. In Chrome for Android, we’ve
removed support for the
datetime <input> type because the spec is still under development. Please use the
datetime-local type instead.
Stay in the loop
Visit
chromestatus.com for a complete overview of Chrome’s developer features, and circle
+Google Chrome Developers for more frequent updates. Get coding!
Posted by Rafael Weinstein, Software Engineer and
<template> Templar