Designing and Debugging Web Layouts With CSS Regions

Screen Shot 2013-10-04 at 3.07.59 PM

The adoption of CSS Regions is definitely moving along swiftly.  They are now supported in Mobile Safari on iOS7, Opera, Chrome Canary, Chrome Stable & WebKit nightly. Browser support continues to evolve and can be tracked here.

CSS Regions allow you to define content that can “flow” through a series of defined regions on the page, so you can create magazine-type layouts and responsive websites through simple CSS.  I wrote about how you can use CSS Regions for creating responsive content in an earlier article.  I’d definitely recommend reading that before continuing here if you haven’t already done so.  It should give you a good basic understanding of how CSS Regions work.

Defining one piece of HTML markup as the source for another piece of markup is an extremely powerful, but very different way of thinking about Web page layout. You’re very likely going to want good authoring tools, and the ability to debug in-browser to figure what’s going on when your site behaves unexpectedly.

What we’ll describe here are some options for authoring and debugging Web layouts that use CSS Regions.

Tooling

As far as tools go for authoring content with CSS Regions, your best and only option at this point is Edge Reflow CC, Adobe’s Responsive Web design tool. Within Reflow, you can easily lay out linked region containers exactly where you want them to be placed, define how you want the different region containers to react (resize, move, hide, etc) to different screen resolutions and/or window sizes , and then define a block of content (text, images, videos, etc) to flow into the linked regions.

Vincent Hardy, Director of Engineering for the Adobe Web Platform team, describes here in detail how CSS Regions work, and how they are supported in Edge Reflow.  As well, in the following video, Jacob Surber, product manager for Edge Reflow, shows you how to design your Web layouts in Reflow using CSS Regions:

A Virtuous Circle

What is pretty amazing here, is that CSS Regions is a W3C spec that was first introduced by Adobe.  It has received widespread support across the browser community in a short amount of time.  CSS Regions are now even supported on iOS7 mobile Safari, and thus will likely show up in the next release of desktop Safari in the upcoming release of Mavericks.

Now that it has received enough industry adoption, Adobe is starting to incorporate the feature into its design tools.  Hopefully, designers will start using this feature, and demand more design-focused features like this. The demand will produce new standards and new browser features, and so it goes, round and round. This is a really nice virtuous circle.

Screen Shot 2013-10-10 at 11.27.34 AM

In-Browser Debugging

Once you’ve authored your regions-based content and are viewing it in the browser, you’re still going to want be able to inspect your layouts and pick apart what’s going on, especially when your site is not behaving as expected. There are several in-browser options available to help you visualize and debug your layouts and explore the different content flows, depending on which browser you are using.

WebKit Nightly

CSS Regions are enabled by default on WebKit nightly, so once you’ve downloaded the latest nightly, you’re good to go. Support was added very recently to provide some very nice visualizations to help you debug your CSS Regions.

If you’re running WebKit nightly, try out the following example I have posted on this site:

http://blattchat.com/demos/regions/basic/

Screen Shot 2013-10-07 at 1.39.04 PMNotice the different connect text regions, interspersed with an image and some highlight text. The text flows from one connected text region to another, regardless of the size of the window, or the resolution of the device you are using to view the content.

In this example we have one DIV that defines all of the source:

<div id="source">
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in ...
</div>

In the CSS, we take that DIV out of the normal layout and indicate that all of the source content should flow into ‘main-thread’ by using the flow-into CSS attribute:

#source {
  -webkit-flow-into: main-thread;
  flow-into: main-thread;
}

Notice how we use both the -webkit- prefixed and unprefixed version of the CSS attribute.  You need the -webkit- prefix to get this to work for now, but eventually as regions become more widely implemented that will no longer be necessary.

We also have seven DIVs laid out in different parts of the page, all of class ‘region’.  In the CSS we define each of these DIVs as a region container using the flow-from CSS attribute.

.region {
 -webkit-flow-from: main-thread;
 flow-from: main-thread;
}

All of the source content in ‘main-thread’ will flow into the region containers. In this example, the source content is just text, but there’s no reason it couldn’t also include images, videos, iFrames, etc.

Now, normally if you want to see what’s going on in a page, you can use the Web Inspector. If you right-click on some of the text and select “Inspect Element”, the Web Inspector will pop up and show you that element:

Screen Shot 2013-10-04 at 2.58.09 PMNotice that it has taken you to the source text.

But with CSS Regions, the source content is kept separate from the actual layout.  The regions define the layout and the source content flows into the regions.  So how do we visualize the individual regions that make up a given flow?  What we really need is to be able to see how the content is going to flow from one region to the next.

If you move your mouse over each of the region containers (DIV elements of class ‘region’) in the Web Inspector, you will see the following:

Screen Shot 2013-10-04 at 3.07.59 PM

 

All of the connected regions in the flow are numbered (indicating the order of the regions in terms of flow) and highlighted a light blue.  Lines are drawn between each of the connected regions to show you where the next connect region is in the flow.  And finally, the currently selected region is highlighted a darker blue.

That’s definitely more useful!  In fact, if you’ve ever used InDesign, or as you saw in the Reflow video above, you’ll find that this interface will be very familiar. Now you can play with the HTML/CSS of each region or resize the page, and see how the content flowing into those region containers adapts.

Chrome

There’s a great detailed article here by Christian Cantrell of the Adobe Web Platform team that discusses debugging CSS Regions in Chrome.  Remember though, CSS Regions are disabled by default on Chrome.  You need to navigate to chrome://flags and enable ‘Enable experimental WebKit features’.  As well, to get the CSS Regions debugging support in Web Inspector, you’ll also want to enable ‘Enable Developer Tools experiments’.

Let’s now try out the same example in Chrome:

http://blattchat.com/demos/regions/basic/

You can bring up the Web inspector by right-clicking on the page and selecting ‘Inspect Element’, or pressing cmd/ctrl-I.

You can right-click anywhere in the Elements tab in the Web Inspector and you’ll see an entry for ‘CSS Named Flows…’.

Screen Shot 2013-10-04 at 3.21.56 PM

Selecting that will provide you with a list of all of the available flows and region chains:

Screen Shot 2013-10-04 at 3.23.59 PMAs you move your mouse over each of the region containers in the Web Inspector, they’ll get highlighted in the browser — very useful for debugging CSS Regions.

The tools and technology are definitely evolving.  Give it a try and let me know what you think.

Photoshop Blending in a Canvas

Screen Shot 2013-09-16 at 11.48.56 AM

I explained a bit about compositing and blending in a previous post, how Canvas blending lets you achieve in a Canvas the same kinds of blending effects you’d find in Photoshop.

Updated – September 24, 2013:
Canvas Blending is also supported on Firefox and iOS7 Safari

Programmatically working with the blend mode is pretty straightforward.  You just take your Canvas context and set the variable globalCompositeOperation:

var ctx = canvas.getContext('2d');
ctx.globalCompositeOperation = 'multiply';

If you’re viewing this post with Chrome and have turned on experimental Webkit features, or you’re running the latest stable version of Firefox or iOS7 Safari, you’ll be able to actually play with this feature below.  Try experimenting with the blend mode and/or color and then drawing on the image.

Check out this Pen!

If the blending is not working for you above, check out this video:

 

 

Interactive CSS Clip Paths

Screen Shot 2013-09-10 at 6.05.08 PM

Did you know that on Chrome you can specify complex clip paths for your content very easily using the clip-path CSS property?

With the standard clip property, you can specify a rectangular clipping area for absolutely positioned elements, as in:

mycontent: {
   position: absolute;
   clip: rect(5px, 100px, 100px, 5px);
}

If you ask me, that’s of pretty limited use.

With the clip-path property (-webkit-clip-path on Chrome) however, you can specify any of the following 4 basic shapes for clipping:

  • rectangle(<top>, <left>, <width>, <height>, <rx>, <ry>)  – rectangle with a top, left, width, height and optional rounded corner radii
  • circle(<cx>, <cy>, <r>) – circle with a center and radius
  • ellipse(<cx>, <cy>, <rx>, <ry>) – ellipse with a center and x and y radii
  • polygon(<x1> <y1>, <x2> <y2>, …, <xn> <yn>) – polygon with a list of points

The following Pen uses the polygon option to let you interactively set the clipping on some content.  Try clicking on the image near one of the points of the clipping polygon.  The nearest clip point will track your mouse until you click again:

Check out this Pen!

You can also specify a complex clip path in some SVG content and then reference that path using:

clip-path: url(#svg-clip-path);
Check out this Pen!

Don’t forget to click on the different tabs to switch between HTML, CSS and the end result!

The creative possibilities here are endless…

It’s important to note though that:

(-webkit-)clip-path: shape

is only supported on Chrome at present, but:

clip-path: url(#svg-path)

is also supported on Firefox.

Keeping track of what’s supported where is a little tedious at best, so I’ve created the following Github repo to help keep track of the various CSS Graphics standards and in what configurations they’re supported on what browser.  Please help keeping that project up to date!

https://github.com/awgreenblatt/css-graphics

This stuff is pretty straightforward and very useful.  I can’t imagine not seeing this show up in more browsers before too long.

Duotone Custom Filter

Screen Shot 2013-05-30 at 5.09.08 PM

Say you have a black & white image and want to display it in many different 2-color schemes.

thief_bwthief_red_yellowthief_blue_pink

You have a few options here.  You could draw the image in a canvas and then use JavaScript to manipulate each pixel.  Or you could in theory convert your black & white image to SVG and then use CSS to manipulate the colors.  That’s probably a pretty decent solution.

Or you could use the new duotone CSS custom filter I’ve built.  You can find the source for the new filter on Github here. Continue reading

Photoshop Layer Mask Implemented with CSS Custom Filters

Screen Shot 2013-05-28 at 3.24.45 PM

My last post talked about how you can create a Photoshop-like soft blur effect with built-in filters.  As I started reading more about how you would actually create that soft blur effect in Photoshop though, I realized that often you don’t want the soft blur to apply to people’s faces.  You want to apply a layer mask which essentially punches through the soft blur around the central subject’s face to reveal the crisp underlying photo on the bottom layer. Continue reading

It’s Curtains for You!

Screen Shot 2012-10-09 at 2.18.55 PM

I recently went over to the cnet.com site and was confronted with an ad that really surprised me.  The whole home page itself became a set of curtains that parted to reveal an ad from IBM.  The texture of the curtains themselves was the home page.  Of course, this was faked out with Flash.  If you look carefully the curtain texture isn’t exactly what was on the page, but it’s close enough that you don’t really notice. But then I thought, I bet I could do that easily with CSS Shaders, and with the actual content as texture to boot. Continue reading

CSS FilterLab Detailed Walkthrough

Screen Shot 2012-10-02 at 12.43.16 AM

I’ve created a video below as a detailed walkthrough of the Adobe CSS FilterLab, from installation, to configuring & developing custom shaders, to collaborating with others on filter development. Before FilterLab, I used to describe custom shader development as essentially ‘programming in the dark’. No debug statements, no tracing, no nothing. Now you can visually interact with your shader and see realtime errors.  That’s a huge leap forward.

If you have any interest in CSS Custom Filters, using or developing them, I couldn’t recommend FilterLab more. Continue reading

CSS Shaders & 3D

Screen Shot 2012-08-09 at 5.28.27 PM

I’ve been giving several talks lately, talking about the different CSS standards Adobe is involved with, and the contributions we’re making to WebKit.  In order to make things easy, I had created a single web page with links to various demonstrations.  But I wanted something subtle on the link page itself that used CSS shaders in a way that would raise an eyebrow or two, to make people realize something different was going on here. Continue reading

A Little Help Debugging CSS Shaders

Screen Shot 2012-06-19 at 11.55.33 AM

Anyone playing around with CSS Shaders has probably discovered very quickly how difficult it is to debug your shader.  There are no debuggers, no breakpoints, not even a simple console.log.  Fortunately, I’ve found a few simple things you can do to prevent you from ripping your hair out. Continue reading

WebKit, and Filters, and Shaders! Oh, my!

snapshot

CSS Shaders are a new and relatively easy way to bring cinematic effects to the web.  You can find out all about them on the ADC, on the Adobe & HTML site or you can read the actual W3 draft proposal. While there are many articles out there showing how to use shaders, actually building your own custom shader is another story. That’s what we’re going to do here. Continue reading