Category Archives: HTML/CSS/JS

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.

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:

Notice 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:

Notice 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:

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’.

Up until now though, gradientmaps.js was only supported on Chrome & Firefox. With the release of iOS7 however, the library is now supported on mobile Safari, so you can view gradient maps on your iDevices!

This particular example has two overlapping DIVs with the same content. The top DIV has a gradient map applied to it. The bottom DIV is left as is. You can then control the transparency of the top layer to define how much or how little of the gradient map you want to show.

You can find out more about the library in this post on the Adobe Web Platform team blog.

gradientmaps.js is now supported on so many browsers, there’s no reason not to check it out. The Web like you’ve never seen it before.

The recent release of iOS7 brings many new exciting features to mobile Safari. I’m going to be writing about this in more details shortly. In the meantime, I’ve updated my CSS Clip Paths and Canvas Blend mode demos to support touch events so you can try them out for yourself on your iPhone/iPad running iOS7.

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.

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:

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!

In a recent post I described how you could use CSS Regions to easily create responsive content. One of the limitations mentioned though was that CSS Regions at present are natively supported only on Webkit nightly and Chrome Canary and Chrome Stable.

There is however the CSS Regions polyfill code up on GitHub to consider. I looked at that last year and it was a bit slow and problematic at the time. It turns out though that there have been several improvements to the code in the interim and it works quite nicely and is quite performant now. Let’s take a look…

These new attributes are recognized by the polyfill. They work the same as the -webkit-flow-into/from and flow-into/from attributes. The polyfill code will detect and use any native implementations that exist so you don’t have to do anything special. Everything should work exactly as it did before on WebKit and Chrome, but now it will also work on iOS4+, Android 4+, Firefox, Safari 5+, and Opera. That’s right, mobile too!

Go ahead and view this post with the other browsers and devices listed above. The Codepen demo should work just fine (let me know if it doesn’t!).

I’ve been writing a few posts about the new gradientmaps.js library, and it occurred to me that gradient maps are a little hard to get your head around. How would you use them in a real-world scenario? From a pure creativity standpoint, they’re a no-brainer. But are there any practical use cases?

Here’s a thought. Say you’re selling shirts on your website. You’re able to print the shirts in a myriad of colors and want to let the consumer pick the color they want. In order to implement this, you could have an image for every possible color, or you could do the following (only works in Chrome & Firefox at present, sorry):

In the above example, when you click on the color button and select a color, that new color is used as the right edge of a color gradient which starts with black. So, if you choose red, the color gradient will go from black to red. The image of the shirt you see has a transparent background. And, if you’ll notice if you look at the JS tab, the start of the gradient is actually transparent itself “rgba(0, 0, 0, 0)”. This is so we don’t recolor the background itself.

The resulting gradient is then applied to the image using:

GradientMaps.applyGradientMap($('img').get(0), gradient);

gradientmaps.js makes use of SVG filters being applied to HTML content. At present that is only supported on Chrome and Firefox.

Pretty easy, and pretty useful. Play around with it and let me know what you think.

In a recent post I described a duotone CSS Custom Filter I had built that allowed you to take a black and white image, and remap the black and white colors to two other specified colors. Say you have a t-shirt website. You could provide a single black and white image, and users could choose the color they want.

In the original implementation I used CSS Custom Filters, which are a little overkill for this use, and they are currently only supported on Chrome. Here we’re going to do the same thing, using an SVG Filter. SVG Filters are currently supported on both Chrome and Firefox and stand a much better chance of being implemented in other browsers sooner rather than later.

In particular, we’re going to use the ComponentTransfer filter primitive, described in more detail in this post.

Let’s take a look at the following SVG implementation (best viewed on Chrome and/or Firefox):

When you click on either the black or white color remapping buttons, JavaScript is executed which recalculates the transfer functions for the feComponentTransfer filter primitives for each color channel.

We don’t use any JavaScript. Instead, we’re using the SVG animate primitive to animate the table values of each transfer function (feFuncR, feFuncG, feFuncB).

For both of these examples, click on the HTML, CSS and JS tabs to see what’s going on and let me know if you have any questions.

As you can see, SVG filters are extremely powerful and worth learning more about. Using them to manipulate HTML content is currently only supported on Chrome and Firefox but it looks very promising that they’ll be supported on all browsers before too long.