Adobe

decor

Web Platform Team Blog

Making the web awesome

iOS 7 Safari & New Web Platform Features

Today, iOS 7 ships with a new version of Mobile Safari which brings with it a whole slew of features that our team worked on! Here are some of the big ones we worked on and what they can help you with.

The features are shown in embedded demos, this means you may not be able to see them in action, until you enable them in browsers or view this post in Mobile Safari on iOS 7.

Regions

Regions lets you layout content seamlessly across multiple containers that simplifies responsive design. We have written about regions earlier, but here is a simple example of how this is possible created by Alan Greenblatt:

1379623011

Regions are also available under a flag in Chrome.

Clip Paths

1379623046

Our team helped with the clip-path property which allows clipping of elements using an SVG path-like syntax via CSS. This allows you to crop elements to only show content that fit within any shape. You can play with other codepen.io demos to see what clip paths can do.

Canvas Path Objects

Previously there was no way to save and reuse paths that you drew earlier on a canvas. With Path() object you can now save paths and fill/stroke/clip these paths. Dirk Schulze wrote up in detail how Path objects will be useful in your canvas projects.

Canvas Blend Modes

canvas

With Canvas Blend Modes you can now use blend modes on drawing operations in Canvas 2D. This means you can blend pixels in canvas using blend modes that are familiar to you from the graphics world such as normal, darken, lighten, screen, overlay, etc. The good news is that Firefox already has Canvas Blend modes and they are unprefixed! So both Firefox and Mobile Safari support Canvas Blend Modes. We hope to see them enabled in Chrome soon.

You can play more on the codepen.io canvas blend mode samples.

Feedback!

We would love to know what you think about them? Do fork them on codepen and play with these features and let us know what you think here or on Twitter @adobeweb. We look forward to seeing these features gradually populate more browsers and help you create more interesting things on the web!

One Comment

  1. September 19, 2013 at 4:42 am, Camilo lopez said:

    So good to see all these features were made by adobe team.