Cross Fading, CSS Flexible Box, Grid Layout, Filters and Meta Referrer

Published on in Google Chrome, Last Week, tech, WebKit. Version: Chrome 17

Last week was the busiest week so far for both projects, totaling up to 1,745 changes — 794 for WebKit, and 951 for Chromium. Highlights include CSS Cross Fading, Flexible Box, Filters and <meta name=referrer>.

Within Chromium, the new History UI has been launched and can be seen on chrome://history. Content Security Policy will be enabled for all extensions using a (newly introduced) manifest version of two or higher and improved download protection has now been enabled by default, assuming you have Safe Browsing enabled.

Right clicking on function values in Web Inspector will now give you the ability to browse to it’s definition. The font property in the styles pane will now show up as a proper shorthand property, selected items in context menus have been given a slight gradient and messages from the front-end to the back-end are now asynchronous.

Timothy Horton landed support for the CSS4 Images cross-fade() function. Though not fully implemented yet, it can be used as a value for any property that expects an image, such as background-image, and will render a cross faded combination of the two given images or gradients. Examples working in nightlies can be found here.

The new CSS3 Flexible Box implementation in WebKit has been enabled by default. While new features and enhancements are still incoming, it is a lot more performant and aligns WebKit better with the spec. Ojan, Tony and Julien have started working on implementing CSS Grid Layout, some patches for which have already landed.

Another new feature which landed today is support for <meta name=”referrer”>. By specifying the referrer policy in the content attribute, which can be one of never (don’t include a referrer header on navigation), always (which includes cross-protocol requests), origin (just send the page’s origin) and default, you can anonymize any request.

As for improved specification support, another CSS 2.1 test was fixed last week. The document.width and document.height properties have been removed, as has the initProgressEvent method, and access keys now work on all elements. JavaScriptCore’s implementation of Error.prototype.toString is now ES5 conformant, adding invalid track formats will throw an exception and the report-only mode for Content Security Policy has been fixed.

Most CSS Filters now work in WebKit nightlies, which includes grayscale, serpia, invert, hue rotating, saturating, opacity, gamma, drop shadow and blurring effects. Meanwhile, computed styles for CSS Shaders have been implemented as well. For CSS Exclusions, the wrap-margin, wrap-padding, wrap-flow and wrap-through properties are now being parsed, indicating good progress.

Other changes which occurred last week:

Work to keep an eye out for this week are related to Web Intents. That’ll be all!

7 Responses to “Cross Fading, CSS Flexible Box, Grid Layout, Filters and Meta Referrer”

Both comments and pings are currently closed.

Peter Kasting

November 22, 2011 at 4:24 am

It’s meta name=”referrer” with two Rs.


November 22, 2011 at 7:38 am

I never understood why elements flashed when using transitions until today. Good thing that they have been fixed now, so i can remove my backup :) thanks!

Peter Beverloo

November 22, 2011 at 1:24 pm

Peter: Thanks again! :)

The shrinking of blurred images can be overcome by putting a null filter after the blur, e.g. -webkit-filter: blur(1px) grayscale(0);

Hi, Peter, great work on consistently giving us an overview on new features – just wondering if you can provide some more live examples (or links to)? (e.g. how did you generate the image in this post?) I wanted to have a look at webkit-filter properties for example but can’t get them to work at all, is it behind a flag in Chromium? Thanks.

Peter Beverloo

November 28, 2011 at 8:12 pm

Hi Adam,

In case of the images, I often lend them from pixel results in the layout tests, which may be found as .png files at the bottom of a changeset. Adding live examples for new features takes a lot of additional time (which I already have so little of), but I’ll try to do so every now and then. CSS Filters are not available yet in Chromium, you really need WebKit nightlies for these.