Adobe

decor

Web Platform Team Blog

Making the web awesome

Background blending now available in Firefox 30

Last week, we announced that Chrome 35 was shipping background blend modes. This week, Firefox 30 was released with support for the background-blend-mode property. This makes it the second browser to add support.

Bennett Feely created some examples of gradients that have blending applied to them:

See the Pen Gradient with background blending by Adobe Web Platform (@adobe) on CodePen.


We’re excited that this feature is being adopted by more browsers! As always, let us know your thoughts or if you have interesting demos, here or on Twitter.

Improving Viewport Unit Support in WebKit

Viewport units are great for creating responsive designs. Unfortunately, issues with the WebKit implementation reduced their usefulness. A couple of months ago, I discovered that Timothy Loh had fixed many of the issues in Blink. Despite the size of the patch, it seemed like a prime opportunity to learn more about the CSS subsystem in WebKit and about viewport units in general. So, I took up the task to port the Blink fix over to WebKit. This turned out to be less than straightforward. In the year since Blink forked from WebKit there has been notable divergence in the structure of the CSS code. I ended up using the Blink patch as a guide and writing my own variant in WebKit. After a great number of revisions, the patch finally landed in WebKit about two weeks ago.

So, what works now?

The most obvious fix is that resizing now works. If you size an object with viewport units and then the user resizes the browser window, the object will resize as the window resizes. Prior to this patch, you would need to reload to get the resize to happen. This is an especially big boon for mobile web apps, since changing device orientation between landscape and portrait is simply a resize of the viewport. In addition, now getComputedStyle conforms to the spec and returns resolved pixel values for viewport units. This patch also makes it possible to use calc with viewport unit values. One of the demos from our shapes showcase clearly shows the resizing effect, as does our demo of positioning shapes with negative margins.

Animations and transitions with viewport units also didn’t work properly. In older versions of WebKit, the following example doesn’t animate, but in the latest WebKit nightly, it animates nicely.

See the Pen jpBxv by Adobe Web Platform (@adobe) on CodePen.

It is likely that other bugs have been fixed by this as well. Get the latest WebKit nightly and test it out for yourself. If you come across any more issues with viewport units that haven’t been fixed by this patch, please head over to bugs.webkit.org and file a bug! I would like to make the viewport unit support in WebKit as robust as it can be, and can only do that with your help.

CSS Shapes and CSS Compositing & Blending in Safari 8

Last week during his WWDC keynote, Craig Federighi’s slide announced that Safari 8 would include two features that the Adobe Web Platform team has been working on: CSS Shapes and CSS Compositing & Blending.

Both features have stable specs in the Candidate Recommendation phase, and implementations on track to ship in other browsers. CSS Shapes has been approved to ship in Chrome later this year, and Blend Modes have been approved for Firefox.

Apple’s support shows the growing momentum to empower designers on the web with the same palette they use in other media.

For more about the kind of elegant designs that these feature unlock, check out some of these articles and demos!

CSS Blend Modes could be the next big thing in Web Design by Bennett Feely

PhotoShop In The Browser: Understanding CSS Blend Modes by Dudley Storey

Add Shape and Depth to Your Layout with Photoshop and CSS Shapes by Rebecca Hauck

Getting to know CSS Blend Modes by Shwetank Dixit

CSS Shapes 101 by Sara Soueidan

Moving Forward with CSS Shapes by Sara Soueidan

CSS Shapes Polyfill by Bear Travis

If you see (or create) more awesome examples, please share them in the comments or on Twitter!

BBQ, Beer & Web Platform Docs FTW

It is already quite a tradition for us at Adobe to host WebPlatform.org Doc Sprints. But pushing forward a central go-to place to document web technologies—built by and to be used freely by everybody—seems not to be enough. Maybe we should also run these events because of the fun stuff that happens around the 1 or 2 days of documenting the web collaboratively? If so, I’d say: “of course!” :)

After a very successful first European Doc Sprint in Berlin back in 2013, it was time for another event in Germany. I am a friend of synergy. So, just as before every other of Marc Thiele‘s events of the past we sat down together and made plans on what could be useful takeaways added to this years edition of the famous beyond tellerrand conference. 500 highly skilled and motivated attendees come to Düsseldorf. They could use a nice warm-up event prior to the conference. Meanwhile, in another quadrant of the web, WebPlatform.org could still use help from web professionals. So why not add some beer and BBQ to glue those two together? Synergy!

Beach bar with a roof

Our initial plan was a beach bar setting. Due to the lack of proper beach bars in Düsseldorf, we ended up building our own summer setting at a decorative old gas station from the 1950s. Out of 70 registrations more than 50 contributors joined the comfy and sunny location and spent a day full of interesting and productive work together.

Location of WPDS @btconf

Our sunny workplace for the day

WPDS btconf hard at work

Hard at work…

WPDS-btconf-paul-work-

Cheers Paul! :) (Picture by Francesco Iovine)

Focus groups and work results

Six community experts led focused groups that made over 800 edits to the Wiki and on-boarded a dozen new contributors that day:

Work results included:

  • removal of all vendor-prefixed example code in every single CSS property
  • revision of fundamental web concepts, as well as beginner docs and tutorials
  • the addition of five JavaScript API pages and docs for the JavaScript Number object
  • docs and examples for 33 HTML elements
  • a special review, focused on responsive images, editing img and picture, and updating a number of SVG elements and attributes

There is a blog post on WebPlatform.org that sums up our work results in much more detail.

Hans Christian Reinl following the wrap up (Picture by Andreas Dantz)

Hans Christian Reinl following the wrap up (Picture by Andreas Dantz)

Delicious burgers and sausages

To keep our contributors happy, Pascal Szewczyk handcrafted some awesome burgers as well as delicious vegetarian BBQ. Teaming up at the grill was Sven Wolfermann, who prepared the award-winning sausages, Sven, and myself had brought with us from Berlin. (I can still remember the stewardess saying “boarding completed with 156 passengers and 40 sausages”… yes that DID happen!)

Profound research on the history of BBQ sauce

Right before lunch, Aaron Gustafson gave a fun speech with “A brief history of BBQ sauce.” (Yes, of course, you can find his slides online.) His profound research was well presented and led to a public tasting of a selection of those fine sauces, together with a bottle of Chattanooga Whiskey Aaron flew over for the event. Thanks again for that tasty and fun addition, Aaron.

Aaron Gustafson with his fun speech about the history of BBQ sauce

Aaron Gustafson with his fun speech about the history of BBQ sauce

Oh, the deck chairs!

At the end of the Doc Sprint, the focus group leads presented the day’s results. We had some swag to give away, including famous WPD stickers (as well as some rare PhoneGap and ODL ones), WPD T-Shirts and the 20 special made WebPlatform.org deck chairs we used over the day that went out to our top contributors. Since at night more than 20 awesome contributors walked away with deck chairs I believe Justin Avery of responsivedesign.is fame and Horia Dragomir must be the ones that share a chair now? :)

Picture by Andreas Dantz (@dantz)

Picture by Andreas Dantz

A hell of a party!

After having wrapped up the results of the day, our Doc Sprint smoothly transitioned over to the official beyond tellerrand pre-conference warm-up, when in the meantime the crowd at our gas station had grown to a cozy party of 150. Tom Arnold took care for a fantastic soundtrack with his “btconf boogie”, also dubbed “songs for the dev”… :) Thanks a bunch, Tom!

To sum things up: we had fun. A lot! If you didn’t join for this epic “Web Platform Doc Sprint + MeatUp + VGQ” you definitely missed out.

WPDS btconf burger

Thanks to all the contributors and volunteers!

This successful Doc Sprint would not have been possible without all the attendees that contributed to WebPlatform.org, the help of our community experts and our lovely volunteers: Tomas Caspers, Kenneth Shinabery, Daniel Connerth, David Kirstein and my partner in crime in organizing the event, Marc Thiele. Thank you all!

CSS Regions no longer available in Chrome 35

The latest stable version of Chrome (v. 35), released last week, removed support for CSS Regions. To accurately reflect this change, we updated the list of supported browsers and published a new set of results in the browser support matrix.

For those of you who love the powerful responsive designs made possible by CSS Regions, you can still experiment with this technology in Chrome by means of Francois Remy’s excellent polyfill. This article, published on our team blog, provides a nice overview of the CSS Regions features made available by the polyfill.

It goes without saying that CSS Regions fans can still enjoy the high performance native support provided by Safari 7 on both mobile and desktop versions!

background-blend-mode now available on Chrome

The Adobe web platform team has been working on the CSS Blending specification. On February 20, the spec progressed to the “release candidate” stage which signals that it is ready for implementation. At the same time, we’ve been implementing the CSS properties in Chrome, Firefox and WebKit.

The first CSS property of this specification to ship to the general public is background-blend-mode.
This property allows a user to blend background images with both one another as well as the background color. The background images and color will not blend with the background of the element itself. Instead, the blending is isolated to the content within the background.

The latest release of Chrome (version 35) on desktop and mobile now comes with support for the background-blend-mode property. If you’re using Chrome, this means that this feature is available for you today.

This new property will also be released in Firefox 30 which is currently scheduled for early June and in Opera 22.
We updated caniuse.com so you know what browser version supports this new feature.

We gathered a collection of CodePens that show how you can use this new property.
The following example was created by Bennett Feely:

Check out this Pen!

In addition to background blending, the more powerful mix-blend-mode property is also on its way. Firefox 31 will be the first browser to ship this new feature.
If you want to experiment with element blending today, the current Opera, Chrome and Firefox builds have experimental support.

To enable in Chrome or Opera:

  1. Copy and paste chrome://flags/#enable-experimental-web-platform-features into the address bar, then press enter.
  2. Click the ‘Enable’ link within that section.
  3. Click the ‘Relaunch Now’ button at the bottom of the browser window.

Turning on the experimental features flag in Opera will also enable support for background-blend-mode, which will be enabled by default in Opera 22.

To enable in Firefox:

  1. Copy and paste about:config into the address bar, then press enter.
  2. Click on ‘I’ll be carefull, I promise!’.
  3. Enter ‘Blend’ in the search field, then press enter.
  4. Set the value of ‘layout.css.mix-blend-mode’ to ‘true’.
  5. Restart Firefox.

The WebKit nightly builds also have complete support for background-blend-mode and mix-blend-mode.

Here is a small example that shows element blending in combination with CSS animations:

Check out this Pen!

If you need some inspiration, check out some of our previous posts on blend modes.
Our friends from Opera also just released a great article on blending. Check it out here for a tutorial and some awesome examples. They even provided a feature detection extension to Modernizr!

Let us know if you run into any issues. You can contact us on the comment section or Twitter at ‘@adobeweb’!
Also, demos are always welcome :-)

Start making (great) infographics

Sarah Hunt shares 3 ways to design an infographic that stands out from the crowd. With the growth of data-driven news sites, infographics are becoming easier to create. That doesn’t necessarily translate into good design. We won’t shame anyone here, because everyone has the right to experiment. But just do a web search for “worst infographics ever.” The results will give you a sense of how infographics — which, by their nature, should clarify data — go terribly, terribly wrong.

Sarah’s “FIRED” method helps avert disaster by assessing the quality of the design as a first step. She then points to tools like Edge Animate, features like CSS Shapes, and infographic services that collect and evaluate the underlying data.

3 ways to design an infographic that stands out from the crowd is a quick read, a little rocket to get you started. And if the article inspires you to do an infographic, share it with us here or on Twitter.

Good-Looking Shapes Gallery

As a modern consumer of media, you rarely crack open a magazine or a pamphlet or anything that would be characterized as “printed”. Let me suggest that you take a walk on the wild side. The next time you are in a doctor’s office, or a supermarket checkout lane, or a library, thumb though a magazine. Most of the layouts you’ll find inside can also be found on the web, but not all of them. Layouts where content hugs the boundaries of illustrations are common in print and rare on the web. One of the reasons non-rectangular contour-hugging layouts are uncommon on the web is that they are difficult to produce.

They are not difficult to produce anymore.

The CSS Shapes specification is now in the final stages of standardization. This feature enables flowing content around geometric shapes (like circles and polygons), as well as around shapes defined by an image’s alpha channel. Shapes make it easy to produce the kinds of layouts you can find in print today, with all the added flexibility and power that modern online media affords. You can use CSS Shapes right now with the latest builds of WebKit and Blink based browsers, like Safari and Chrome.

Development of CSS Shapes has been underway for about two years, and we’ve been regularly heralding its progress here. Many of those reports have focused on the evolution of the spec and implementations, and they’ve included examples that emphasized basics over beauty. This article is an attempt to tilt the balance back towards good-looking. Listed below are simple shapes demos that we think look pretty good. Everyone on Adobe’s CSS Shapes engineering team contributed at least one.

There’s a live CodePen.io version of each demo in the gallery. Click on the demo screenshot or one of the handy links to take a look. You’ll want to view the demos with a browser that supports Shapes and you’ll need to enable CSS Shapes in that browser. For example you can use a nightly build of the Safari browser or you can enable shapes in Chrome or Chrome Canary like this:

  1. Copy and paste chrome://flags/#enable-experimental-web-platform-features into the address bar, then press enter.
  2. Click the ‘Enable’ link within that section.
  3. Click the ‘Relaunch Now’ button at the bottom of the browser window.

A few of the demos use the new Shapes Polyfill and will work in most browsers.

And now, without further ado, please have a look through our good-looking shapes gallery.


Ozma of Oz

ozma-demo-screenshot

This demo reproduces the layout style that opens many of the chapters of the L. Frank Baum books, including Ozma of Oz.  The first page is often dominated by an illustration on the left or right. The chapter’s text conforms to the illustration, but not too tightly. The books were published over 100 years ago and they still look good print.  With CSS Shapes they can still look good on the web.

Top Cap

topcap-demo-screenshot

The conventional “drop-cap” opens a paragraph by enlarging and highlighting the first letter, word or phrase. The drop-cap’s goal is to draw your attention to where you can start reading. This demo delivers the same effect by crowning the entire opening paragraph with a “top cap” that funnels your attention into the article. In both cases, what’s going on is a segue from a graphic element to the text.

Violator

monsters-demo-screenshot

A violator is small element that “violates” rectangular text layout by encroaching on a corner or a small part of an edge. This layout idiom is common in short-form magazines and product packaging. That “new and improved” banner which blazes through the corner of thousands of consumer products (whether or not they are new or improved) – it’s a violator.

Column Interest

columns-demo-screenshot

When a print magazine feels the need to incorporate some column layout melodrama, they often reach for this idiom. The shape spans a pair of columns, which creates visual interest in the middle of the page. Without it you’d be faced with a wall of attention sapping text and more than likely turn the page.

Caption

Screenshot of the wine jug caption demo.

The old-school approach for including a caption with an image is to put the caption text alongside or below the image. Putting a caption on top of an image requires a little more finesse, since you have to ensure that the text doesn’t obscure anything important and that the text is rendered in a way that preserves readability.  The result can be relatively attractive.

This photograph was taken by Zoltan Horvath who has pointed out that I’ve combined a quote about tea with a picture of a ceremonial wine jug.  I apologize for briefly breaching that beverage boundary. It’s just a demo.

Paging

Screenshot of the paging demo.

With a layout like this, one could simple let the content wrap and around the shape on the right and then expand into the usual rectangle.  In this demo the content is served up a paragraph at a time, in response to the left and right arrow keys.

Note also: yes in fact the mate gourd is perched on exactly the same windowsill as the previous demo. Zoltan and Pope Francis are among the many fans of yerba mate tea.

Ersatz shape-inside

Screenshot of the ersatz shape-inside demo.

Originally the CSS Shapes spec included shape-inside as well as shape-outside. Sadly, shape-inside was promoted to “Level 2″ of the spec and isn’t available in the current implementations. Fortunately for shape insiders everywhere, it’s still sometimes possible to mimic shape-inside with an adjacent pair of carefully designed shape-outside floats. This demo is a nice example of that, where the text appears inside a bowl of oatmeal.

Animation

animation-demo-screeenshot

This is an animated demo, so to appreciate it you’ll really need to take a look at the live version. It is an example of using an animated shape to draw the user’s attention to a particular message.  Of course one must use this approach with restraint, since an animated loop on a web page doesn’t just gently tug at the user’s attention. It drags at their attention like a tractor beam.

Performance

performance-demo-screenshot

Advertisements are intended to grab the user’s attention and a second or two of animation will do that. In this demo a series of transition motions have been strung together into a tiny performance that will temporarily get the reader’s attention. The highlight of the performance is – of course – the text snapping into the robot’s contour for the finale. Try and imagine a soundtrack that punctuates the action with some whirring and clanking noises, it’s even better that way.

CSS Shapes Polyfill

The CSS Shapes feature is coming soon to a browser near you. The specification has reached Candidate Recommendation and implementations are maturing in the experimental builds of WebKit and Blink. In addition to brushing up on CSS Shapes over at A List Apart or here on the Adobe Web Platform Blog, you may also want to start thinking about browser compatibility. Even after these features become available in release versions of Chrome and Safari (fingers crossed for soon), they will not yet be available in other browsers.

The CSS Shapes Polyfill is one method of achieving consistent behavior across browsers. It is a bit of JavaScript that checks to see if a browser supports CSS Shapes; if not, it approximates the behavior with a series of floats. There are simpler approaches to compatibility, such as gracefully falling back to old float behavior, or using feature detection like Modernizr to tweak styles based on shapes support. However, the polyfill allows you to use shapes, even in non-supporting browsers, and utilizes native implementations where possible.

The Basics

See the Pen CSS Shapes Polyfill Demo by Adobe Web Platform (@adobe) on CodePen.

Using the polyfill is incredibly easy. All you have to do is:

  1. Download the script from GitHub. You’ll want shapes-polyfill.js or shapes-polyfill.min.js (the minified version).
  2. Include the script in your page.
  3. Add shape-outside and shape-margin styles in linked stylesheets or <style> elements.

Example

In order to use the polyfill, the key pieces are the CSS to add the shape styles:

.shape {
    float: left;
    -webkit-shape-outside: circle(50%); /* only prefix currently supported */
    shape-outside: circle(50%);
    shape-margin: 1em;
}

and the html markup it is applied to, along with the polyfill script itself:

<div class='shape'></div>
This text will wrap around the circular contour to the left.
<script src='shapes-polyfill.js'></script>

If you are interested in seeing the full context for this code, I have created a working example.

Caveats

The polyfill will work best in simple shapes cases, and there are some limitations you may run into.

  • Shape styles must be set inside style elements or linked stylesheets. The polyfill does not monitor inline styles that are set via the style attribute.
  • The script recomputes layout only in response to a window resize event. If other events (like style changes) should cause relayout, you will have to force a layout using the ShapesPolyfill.teardown() and ShapesPolyfill.run() methods (see the documentation).
  • shape-outside: url() values respect CORS, so you should load images from the same domain as the page, or from a server that supplies the appropriate CORS headers.
  • The polyfill does not yet support shapes on stacked floats.

In addition to the above limitations, the polyfill also has a performance cost. Because of the computation required, layout using the polyfill is roughly an order of magnitude slower (10-20x depending on shape) than layout utilizing a native shapes implementation. The polyfill is also another resource that must be loaded into your page. You should weigh these performance costs when deciding whether the polyfill is the optimal approach for shapes browser compatibility on your site.

Further Tinkering

The source code is available on GitHub, and includes documentation for customizing how the polyfill runs. Please let us know if you have any feedback. You can do so through GitHub issues, here on the blog, or via twitter @adobeweb.

Posted in Shapes | Comments Off

CSS Shapes feature testing is available in Modernizr production builds!

Modernizr is a JavaScript library that detects HTML and CSS features in the user’s browser. I have developed feature-testing support in Modernizr for CSS Shapes. I am writing this post to proudly announce that support for CSS Shapes is now available in Modernizr 2.8.1 production builds. It will also be included in future Modernizr releases.

Modernizr-2-Logo-vertical-medium

Why should you do feature testing?

As CSS Shapes support is knocking on the door of release in stable browser versions, I want to encourage you to get a head start using the feature. Until it is widely supported, you might want to have a fallback in place or display a notice to users with browsers that don’t yet support the feature. Modernizr is a good tool to enable this feature detection.

How we can test for the shapes support?

Let’s take a look at the following examples:

The most important part of the first example is the if-condition that checks for “Modernizr.shapes” and decides to show an informational message if shapes support is not detected.

You can also also specify custom CSS selectors for cases when Shapes support is detected. Modernizr adds the ‘shapes’ class to the html root tag if shapes are supported, and the ‘no-shapes’ class if not. If you want to know more about how Modernizr works, please check out the documentation.

The key point of the second example is the .shapes prefix before the h1 selector, which applies the custom style to every h1 tags only if the support is detected.

How do you get Modernizr with CSS Shapes support?

  1. Open modernizr.org and go to the Download section.
  2. Check the box for CSS Shapes under Non-core detects.
  3. Check the box for Modernizr.testAllProps() under Extensibility.
  4. Generate and Download the code.
  5. Include the generated Modernizer.js in your HTML file.
  6. Now you can use Modernizr.shapes in JavaScript or .shapes in CSS anywhere in your page.

Modernizr is a powerful tool for testing HTML and CSS feature support. I encourage you to use it if you’re experimenting with the latest and greatest web features.

Let us know what you think here or on Twitter @adobeweb or @ZoltanWebKit!