Monthly Archives: April 2012

Using CSS Regions as an Enhancement

If you were not aware of them CSS Regions are proposal to CSS3 that would allow for some magazine like layouts in HTML pages. Adobe has been leading the charge on getting them into WebKit.  They are currently available in Chrome. (Also I think IE10)

Now the way they work:

  • You create a bit of content in an element like an article
  • You designate that article as the source of a “flow”
  • You designate other elements as the recipients of the “flow” (We’ll call them “regions”)

Then when the browser renders the content

  • The element designated as the “flow” is not shown
  • The content of the “flow” pours into the “regions”

Assuming this HTML:

And this CSS:

You get something like this:

I have a demo. It only works in Chrome.  Resize the screen to see the flowing of the content.

I was presenting on them the other night and I got asked a pretty good question.

Have you thought about how these degrade?

I made a bad joke, then mumbled something about if the browser doesn’t support CSS Regions then the original “flow” element gets displayed and all is well.

I tested it today. And all is not well. Because I still created those region elements. And they show up down at the bottom and add whitespace.

Check out the demo on any browser bu Chrome and you’ll see what I’m talking about all the way at the bottom.

So after some experimentation I decided that the best way to handle this was to create my four regions with CSS exactly how I had but only inject the region holders if the browser supports regions, like so:

Here’s a demo of the improved version.

In this case, I get a much better experience for non Chrome users–no weird mile of whitespace at the bottom of the content.

April NYC JavaScript and HTML5 Hackfest Meeting

I’m headed up to New York on Wednesday April 11 at 7pm  for the April meeting of the NYC JavaScript and HTML5 Monthly Hackfest. I was originally intending to just attend but I got tapped to do a 15 min talk.

I’ll be speaking about Adobe’s CSS contributions to Webkit, specifically Regions and Exclusions.

If you’re in NYC, it’s a great group so come on and check it out. Sign up on their site to find out the location details.

webDU 2012

Hello antipodeans and antipodiphiles, I will be speaking at webDU 2012 in Sydney, Australia in a few weeks.  If you have never heard of webDU, it is an absolutely fantastic web conference. It provides a great environment for honest open conversations and learning about the field.

I’ll be giving two talks:

Semantic HTML5

A foray into the geekier elements of internet HTML plumbing.

The Future of HTML5 Motion Design

Talking about Adobe Edge, and showing off some of the cool things we are doing with browser technology.

If you’re in the area, check it out.

webDU
May 3rd-4th
Sydney, Australia

MoDevUX 2012

It looks like I’m going to be speaking at MoDevUX outside Washington, DC later this month.

I’ll be talking about how to make great user experiences in mobile applications with PhoneGap.

It’s a new event and group for me, and it looks great. It’s a UX and UI focused conference with a focus on mobile.  Better yet, here it is in their words:

MoDevUX will bring together leading mobile developers, UX/UI designers, architects and managers to break the mold on user experience and design.  Attendees will discover the latest in mobile UX/design methods and meet likeminded people at the edge of the mobile frontier. Be sure to check out the workshops available on the 19th and the hackathon on the 21st!

 

If you’re in the DC area, check it out.

MoDevUX
April 20
McLean, VA

HTML Page Slide Without a Framework

I’m working on a little demo mobile application for an upcoming project, and I wanted to add sliding transitions between pages. Pretty simple, right? You just use jQuery, jQuery Mobile, zepto, or one of a bunch of other frameworks, and they handle this for you. I didn’t want to.  Part of my goal with this particular project is to challenge myself to work without a framework so that I can see how this stuff works by hand.  Also I wanted to keep the HTML as slim and uncrufted as possible

Googling found very little to go on – except a micro solution for page transitions by FASW. I like it, but it’s still using someone else’s work, and I didn’t like adding even the little bit of HTML cruft that it needed.

So I rolled my own.

The solution I came up with actually is pretty lightweight and is powered by a little AJAX, some CSS transitions, and CSS transition events. It’s also important to note that this only works with WebKit. (My personal use case is for a mobile application with PhoneGap targeting Android and iOS, so I only need WebKit compatibility.)

First thing is to set the CSS of the body to have a transition on it, so when I move it around it’s animated.

Next thing I do is fire off a function when the page loads to replace all links with a function that will create the effect.  I use some techniques I learned from a great article named From jQuery to JavaScript: A Reference to handle these operations without jQuery.

Next step is to use AJAX to get the linked page.

Now comes the transitions.  What I need to do to accomplish this page slide is:

  1. Slide the page off the screen to the left.
  2. Instantaneously move the page to the right side off screen
  3. Replace the contents of the body with the new content
  4. Slide the page on to the screen from the right.

I have to do it in that order.  If you replace the contents independent of the animation, you get weird effects like the page changing then the animation happening, which looks jarring. Or you get the opposite, the transition happening, then the contents changing.  Looks ugly.  Trying to time these proved problematic. The best thing to do would be to wait for the transition offscreen to happen, then change the content, then move it back on screen. I was able to do this by using a transition event.

Basically as far as I can tell there is only one transition event “transitionEnd” regardless of browser manufacturer.  I haven’t been able to figure that out. Animation events appear similarly limited.  So here’s how I did it:

I moved the body to the left side of the screen.

There is an event listener that handles making it transparent while I move it to the other side of the screen.

I then replace the content, make it visible again, adjust the browser history, and move it back to the center.

Then to be thorough, I make sure that I reverse the process if the user hits the back button.

Is this the best way to do this?  I have no idea.  But it works for me and I couldn’t find a comparable solution via Google.

There is a demo here.(WebKit browsers only)

Full source code is available via github.