Web Platform Team Blog

Adobe

decor

Making the web awesome

The Web Platform Team at HTML5 Dev Conf

HTML5 Dev Conf is happening soon in San Francisco, and many of our team members will be there as speakers and attendees. Here are all the stuff we are going to be talking to you about:

Arno Gourdol will be speaking about how cupcakes, Alice in the Wonderland and Baby Elephants are moving the web forward. Does that sound like a riddle? Don’t worry, you will get to see boundary-pushing demonstrations of the latest features that our team has been working on to make the web richer for designers and developers on Oct 23 in E-134 at 9am.

CJ, who has been working on pioneering showcases of the future of the web, will be speaking about how to create rich web experiences using different techniques, and explore how new web features may change the way we create rich web content on Oct 22 in E-132 at 2.30pm.

Alan Stearns, who edits the Regions and Shapes specifications and has spent significant time thinking about layout in CSS, will be speaking about various layouting mechanisms that are available today (like Flexbox and viewport units) and preview upcoming features like Grid Layout, Regions, Shapes and Exclusions) on Oct 22 in E-120 at 10.40am.

Alan Greenblatt, who has been experimenting with blend modes, regions and SVG filters while writing a mighty fine cross-browser library to take advantage of SVG filters for styling, will be speaking about SVG filters, CSS filters, and Blend Modes on Oct 22 in N-120 at 4pm.

Dmitry Baranovskiy has been working on a new JavaScript Library that will be unveiled during his talk on Oct 23 in E-133 at 11.40am! This one will be exciting!

I will be speaking on how GPU impacts web developers and what you can use to learn more about it and use it in the right manner on Oct 22 at 11.40am in E-131.

There will also be other Adobe folks talking about interesting ways Adobe tools could be of use to you.

  1. Tomas Krcha will be talking about using JavaScript to program your own workflows from Photoshop on Oct 23 in N-120 at 2.30pm.

  2. Adam Lehman will speak on Brackets: An Open Source Code Editor for the web on Oct 22 in E-133 at 5pm.

  3. Paul Trani will speak on how Creative Cloud helps you in creating better web experiences on Oct 23 in E-130 at 2.30pm.

  4. Jacob Surber will talk about how Edge Reflow helps in visualizing and communicating your responsive intent on Oct 22 in E-130 at 2.30pm.

  5. Alejandro Gutierrez will show how you can explore HTML5 and CSS through the eyes of Dreamweaver on Oct 22 in E-130 at 10.40am.

  6. Sarah Hunt will teach you how to get started with web animations using Edge Animate on Oct 23 in N-120 at 1.30pm.

  7. Andrew Trice has a few sessions on PhoneGap and Cross-platform mobile development, so does Christopher Coenraets.

We hope to see you there! We also will be at our booth where you can find us (let us know on twitter too!) and chat more about what you think about our features, and what we can do to make your design and development better.

Join us and National Geographic in saving Baby Elephants!

Update (11/4/2013) : Thanks to everyone for supporting our #ProtectTheElephants. Our campaign has ended. Please follow @NatGeo to show your continued support.

Elephants are increasingly endangered as people expand into their habitats, and poaching has drastically exacerbated the plight of the African elephant in particular. In 2012 the National Geographic cover story “Blood Ivory” revealed a complex, international web of trade that has contributed to the deaths of at least 25,000 elephants each year. Fewer than 700,000 now remain in the wild.

Adobe and National Geographic are working together to promote the conservation and protection of elephants and other wildlife by providing grants to scientists and conservationists who are working around the globe to address human-animal conflict and improve our understanding of the biology and conservation needs of elephants and other species

Tweet and help save these elephants

With every tweet that includes the hashtag #ProtecttheElephants Adobe will donate $1 to the National Geographic Society to help save these elephants.

Sample Tweet:$1 donated by @adobeweb to @natgeo society – http://adobe.ly/171ALEr – for every tweet with #ProtectTheElephants


Watch the video if you want to learn more how Adobe and National Geographic are working together to use the latest web technologies like CSS Regions to deliver compelling stories through the modern web.

Cutting Edge CSS Features at CSSConf.eu 2013

This year, on September 13, front-end web developers and web designers gathered in Berlin for the first edition of CSSConf held in Europe. It was an awesome event packed with highly informative and entertaining talks about features, tools, techniques and upcoming technology that super-charge CSS productivity.

I was happy to be on stage and share some insight about the CSS features we are working on at Adobe. The talk was called “Cutting edge CSS Features” and it covered CSS Regions as a tool for responsive design, CSS background blend modes and CSS Shapes. Attendees also got a sneak peek of our upcoming demo for “Alice in Wonderland” where complex CSS Shapes are used to enhance the visual storytelling experience.

As much as I rehearsed, I could not fit another upcoming CSS feature into the time I was given. Instead of rushing everything and making everyone’s heads spin, I decided to pull it out at the last moment and focus on the rest. I dropped a topic that I am really excited about so I recorded a follow-up video with an introduction to CSS Masking that uses the slides and demos I had prepared.

All the speakers covered very interesting subjects. The topics ranged from how CSS works with Web Components to how specially crafted CSS can be used to steal sensitive information. All the video recodings of the talks have been made available for free on YouTube.

CSSConf.eu 2013 went down as a great debut in Europe and I am looking forward to future editions. It was a great opportunity to learn about the state of CSS and to share stories and experiences with fellow web developers and designers.

Test the Web Forward Shenzhen Registration is Now Open!

Adobe is pleased to partner with the W3C, Google and Intel to bring you the third Test the Web Forward event in China. The event will be on November 9, 2013 as part of the W3C’s annual TPAC conference in Shenzhen, China. If you’re in the area, please join us for a rare opportunity to learn from and hack with browser engineers and spec editors from around the world. Delicious food, drinks, and a great time is promised to all who attend.

Registration is now open and more details can be found on the Test the Web Forward event page, so come help make the Web a better place!

Please follow us on social media for schedule and speakers updates.
Twitter @testthewebfwd
Weibo @TestTheWebForward 

Hope to see you there!

CSS luminance masking now available in Chrome Canary and Webkit Nightly

after-luminance

CSS masks provide means to partially of fully hide images by using an image (or another graphical element) as an alpha mask or a luminance mask.

If until now only alpha masks were available, now one can select between the two types by using the -webkit-mask-source-type property (in Webkit Nightly) and the mask-source-type property (you need to enable Web Platform features in Chrome Canary).

Let’s consider an image and a mask. We can apply the mask over the image in the following way:

img {
-webkit-mask-image: url(mask.png);
-webkit-mask-repeat: round;
}

In this case, the default mask type is alpha, so only the alpha values of the mask are considered: everything outside the rainbowish circle has alpha 0, so the image will be fully transparent, and everything inside the circle has an alpha of 1, so the image will be displayed. This codepen demo illustrates the default behaviour:

before-luminancemasking

The luminance value is determined by the RGB values of the mask and the luminance coefficients as follows: luma = (0.2126 * R + 0.7152 * G + 0.0722 * B). To determine the transparency of the object, the alpha channel of the object is then multiplied by the luminance value and the alpha channel of the mask.

So, where the old mask had an alpha of 0, it will still remain zero, but where is was 1 it will become partially transparent depending on the colors of the rainbow. This codepen demo illustrates luminance masking in action:

after-luminance

It should be noted that, besides pixel images like PNG or JPG, luminance masking supports SVG images and even CSS gradients.

Feel free to share your thoughts about this new feature in the comments section!

Introducing ShaderDSL.js: Web Developer friendly syntax for WebGL Shaders

Shader applied to an image

Thibault Imbert introduces us to ShaderDSL.js – a DSL for WebGL that makes it easier to write code for shaders that is used in WebGL using the familiar syntax of JavaScript rather than C. Read more on Thibault’s blog post introducing ShaderDSL.js on how can you use this framework to write shaders in an easier syntax. You can also download the DSL on Github.

Design next generation responsive designs for iOS7 with Edge Reflow CC and CSS Regions–A story of collaboration

Apple recently announced its official release of iOS 7 . This is a release packed with very significant changes, in particular a radical transition for the iOS user interface design and user experience.

Part of the updates to iOS 7 is an upgrade of mobile Safari which comes with multiple new features. One of these features is CSS regions. CSS regions is a revolutionary CSS specification draft that allows a deeper separation of concerns in the way designers and developers structure their content and layout. They can now manage the way content should flow across different regions of the page design (hence the name CSS Regions) separately from the content itself . Then content can now be made to flow in different chains of regions, typically laid out differently for a mobile, tablet or desktop/laptop use.

So the same content can flow across different layouts for each of the designs designers want to author.

Below is an example of a design using CSS regions, and you can see how the same content flows through different areas of the page at different form factors. Note how the text body flows through multiple regions that can be placed arbitrarily around the quote (top and bottom for the narrow version, all around for the others).

Figure 2–Screen shots from the ‘Bike & Co.’ demo

This is a core technology that we are excited to see Apple enable in their browser.

Our Web Platform team at Adobe has been working on this feature, with many other partners in the W3C, the WebKit and the Blink projects, for over two years now. It has been a delight to see the feature we proposed go through maturation thanks to the feedback in both the CSS working group (e.g., Microsoft is a co-editor of the specification with Adobe), where the specification is defined, and in the open source project, where it is implemented (and we collaborated on the implementation with engineers from different companies such as Apple and Google). Safari is the first browser to release with support of the latest specification and this is a major step forward for beautiful, responsive layouts on the web.

So, attention web designers and developers! You can start using the future of responsive design now (on iOS 7, but check out the compatibility chart for precise details about where the feature is supported). There are great demos and resources to get you started.

But that’s not all.

With today’s new update to Edge Reflow CC , a web design tool to build beautiful responsive web designs,  designers can now create flowable responsive designs with regions, similar to the effects that users are able to create in Photoshop.   Also, Edge Code CC,  a lightweight code editor for web developers and designers working with HTML, CSS, and JavaScript was updated with code hinting support for regions to easily implement flowable, magazine-like designs.  You can download both Edge Reflow and Edge Code with your free subscription to Creative Cloud.

The following screenshot shows how the content shown above was authored in Edge Reflow CC.

Screen Shot 2013-09-25 at 7.57.41 AM Screen Shot 2013-09-25 at 7.58.18 AM

Figure 2. Screen shots from the ‘Bike & Co.’

So checkout the video and shiny web features for what I hope will be an aha moment for responsive design authors when witnessing the future of responsive design meeting the present!

We would love to hear what you think about this feature and the tooling workflow that Reflow provides. Please let us know @adobeweb on Twitter or by leaving comments here.

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!

Repeat space and round available for mask-repeat and background-repeat properties in Webkit

As a part of the CSS Masking and CSS Backgrounds and Borders specifications, the -webkit-mask-repeat and background-repeat properties can have the values of round and space.

For example, let’s say we have a green div with the following style, which is located on a blue background:

div {
width: 250px;
height: 300px;
background-color: green;
-webkit-mask-image: url(star.png);
-webkit-mask-size: 91px 65px;
-webkit-mask-repeat: repeat;
}

where star.png is the following image:

star

As you can see from figure 1, because the mask image does not fit a whole number of times in the background positioning area (which is determined by the background-origin or -webkit-mask-origin properties), it gets clipped. To avoid this, we can specify a mask-repeat value of either round or space.

repeat

             Figure 1

Round

When using a value of round, the mask image gets scaled so that it will fit a whole number of times, as shown in figure 2. From the original size of 91px x 65px the image is shrunk to 83px x 60px, thus appearing exactly 3 times on the x-axis and 5 times on the y-axis. Quoting the spec: “In the case of the width (height is analogous): if X ≠ 0 is the width of the image and W is the width of the background positioning area, then the rounded width will be X’ = W / round(W / X) where round() is a function that returns the nearest natural number (integer greater than zero)”.

round

             Figure 2

Space

When using a value of space, the mask image is repeated as often as it fits in the background positioning area without being clipped. Then, the images are spaced out to fill the area, in such a way that the first and last images touch the edges of the area. Figure 3 shows how the masks are spaced so that 2 masks will appear on the x-axis and 4 masks on the y-axis.

space

             Figure 3

The repeat and space values also are implemented for the background-repeat property. While writing this blogpost we discovered that when resizing a window containing an element with a background-repeat: space value, the portion between the spaced images is not drawn. We will fix this here: https://bugs.webkit.org/show_bug.cgi?id=120607.

Browser Support Matrix for CSS Blend Modes

If you want to check the implementation status of CSS Blend Modes in the browser you are using (or targeting), you can now easily do so by looking at the CSS Blend Modes Browser Support Matrix.

When creating this matrix, we took advantage of the awesome work done for CSS Regions. In fact, we used the same code, so behind the scenes, the support matrix uses QUnit for unit tests and BrowserScope for storage. The only significant change to the backend is the addition of a manual testing capability.

Don’t get this wrong – whatever could be automated, was. It’s just that some functionality simply can’t be tested automatically. To verify that the blending operation between two layers was done correctly, we would have to check the pixel color values of the resulting layer. There is no JavaScript API to do this in browsers, and due to security reasons there probably won’t be one in the future. The only exception is Canvas, whose pixels you can access by design, but those tests are automated.

Not adding manual tests would limit the testing to whether the related CSS properties are considered valid by the browser, and that would have left a large area of the feature uncovered. False positives could ensue. (e.g. at the moment, in some browsers only the parsing of mix-blend-mode is implemented; the property is valid, the automated tests pass, but no blending actually takes place).

We tried to make the manual testing experience as painless as possible. The tests are simple, and are integrated in the same QUnit suite that runs the automated tests (via asyncTest). To avoid unnecessary testing, when a specific property parsing test fails, related manual tests will not be displayed, and their results will be registered as failures.

As the implementation progresses, we will keep the matrix updated with the latest support. That is, within reasonable limits – we will do it for major releases, but not after every patch that gets submitted. Of course, if you want up to date information on a nightly build, or for some reason are unhappy with what you see in the submitted results, you can always run the tests in the browser yourself. Just don’t forget to enable the appropriate flag before you do. You can also check out the sources on github.

In learning from its CSS Regions predecessor, to keep the matrix clean, the results submission mechanism will not be available externally. The Regions matrix initially went for a crowdsourcing approach, but a few months in the ‘internet’ wild proved that to be ‘suboptimal’.

The testing currently covers the background-blend-mode, mix-blend-mode and isolation (parsing) CSS properties and the Canvas 2D globalCompositeOperation attribute. Support for testing SVG blending will be added in the future.

Finally, in case you missed the links before, be sure to check out the CSS Blend Modes Browser Support Matrix, and the source code.